React学习日记：React Router路由

前言

前些天在使用路由时，因为一时疏忽，将Route组件打成Router，报了错：The prop history is marked as required in Router, but its value is undefined. in Router。当时以为是版本的问题，找了半天解决方案也无济于事，结果后面发现是拼写自动补全上的疏忽（无语了…）。所以感觉还是有必要写篇博客来记录下这知识点。

首先

什么是路由？

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。在构造单页面应用SPA时，很多都需要用路由来进行页面的切换跳转。

与a标签的区别

1.a标签: 实现页面跳转，重新渲染整个页面。
2.路由组件： 利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，页面内一些导航组件等不需要更改的不重复渲染，只渲染新增的东西。避免渲染一些无用功，大大提升性能。
利用路由组件，用户几乎感觉不到页面跳转的变化。

路由的使用

（1）路由安装

npm install react-router-dom

或

npm install react-router

这边需要提一下react-router与 react-router-dom的区别。
1.react-router: 实现了路由的核心功能
2.react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，BrowserRouter和HashRouter组件等。但说起来它的Route Switch等一些组件只是从react-router中导入再导出并无增做处理，所以跟react-router无太大差别。
总结： react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。基于浏览器环境的开发，只需要安装react-router-dom。而且使用react-router 4可能会遇到一些版本问题，这边建议react-router-dom一步到位。

基本用法

React router中有三种类型的组件，一是路由组件第二种是路径匹配组件第三种是导航组件。
（1）路由组件: BrowserRouter 和 HashRouter
（2）路径匹配的组件: Route 和 Switch
（3）导航组件: Link

（一）路由组件

（1）BrowserRouter： 路由组件包裹层。Route>和 Link 的包裹层。BrowserRouter 会为你创建一个专门的 history 对象，用来记录你的路由，从而能够返回上一页或者跳转到指定的路由页面。区别于 HashRouter，有响应请求的服务器时使用BrowserRouter，使用的是静态文件的服务器，则用 HashRouter。
属性：
1.basename: string 如果你的项目在服务器上的一个子目录那么这个basename就是目录的名称。

BrowserRouter basename="/calendar" />
<Link to="/today"/>       // 渲染<a href="/calendar/today">

2.getUserConfirmation
结合Prompt 组件使用可以拦截和修改 Prompt 的消息。

function getConfirmation(message, callback) {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />;

3.forceRefresh:bool 如果为true在页面导航的时候后采用整个页面刷新的形式。

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

4.keyLength：number ，location.key(表示当前位置的唯一字符串)的长度。默认为6。点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。

<BrowserRouter keyLength={10}/>

（2）HashRouter： 路由组件包裹层。相对于 BrowserRouter来说，更适合静态文件的服务器。用 URL 的 hash 部分（即 window.location.hash ）的 Router 使 UI 与 URL 保持同步。Hash 历史记录不支持 location.key 或 location.state。
属性：
1.basename: string 。效果同BrowserRouter。
2.getUserConfirmation，效果同上，用于确认导航的功能。默认使用 window.confirm。
3.hashType: string。用于 window.location.hash 的编码类型。默认为 slash。
可用的值是：
slash - 创建 #/ 和的 #/sunshine/lollipops
noslash - 创建 # 和的 #sunshine/lollipops
hashbang - 创建 ajax crawlable，如 #!/ 和#!/sunshine/lollipops

（二）匹配组件

（1）Route: 根据Route的path位置和路径匹配的时候渲染对应的组件。Route组件的path属性指定路由的匹配规则。这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。

（2）Switch: 渲染与该地址匹配的第一个子节点 Route或者 Redirect。可以利用 Switch 做分组，即当有匹配时，匹配对应 path 对应的组件；如果没有匹配，则匹配 NotFound 页面。

<Switch>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Switch>

（三）导航组件

（1）Link： 导航到指定的路由，Link组件用于取代a标签，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是a标签的React 版本，可以接收Router的状态。
属性： 1.to:string|object，如果值为字符串，则导航到字符串所在的路由，如为object:（1）pathname :表示链接到的路径的字符串 /hello
（2）search :query参数 ?name=cfl
（3）hash : hash的值 #weixin
（4）state

规则一：

<Link to='/courses?sort=name'>字符串形式跳转</Link>

规则二：

<Link to={{
  pathname: '/courses',          // 基础路径
  search: '?sort=name',          // 匹配字段
  hash: '#the-hash',             // 对应内链
  state: { fromDashboard: true } // 未知
}}>
  对象形式跳转
</Link>

（2）NavLink: NavLink是Link的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数.
属性:
1.activeClassName(string)：设置选中样式，默认值为active
2.activeStyle(object)：当元素被选中时，为此元素添加样式
3.exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
4.strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
5.isActive(func)判断链接是否激活的额外逻辑的功能

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

（3）Redirect： 渲染 Redirect将使导航到一个新的地址。这个新的地址会覆盖 history 栈中的当前地址，类似服务器端（HTTP 3xx）的重定向。我们可以设置某个路由重定向到另一个路由，例如下面即对 / 完全匹配重定向到 /timeline 页面。

<Redirect from="/" to="/timeline" exact />

Redirect - push属性，push：bool；当 为true 时，重定向会将新地址推入 history 中，而不是替换当前地址。

<Redirect push to="/somewhere/else" />

（四）补充

每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发。

<Route path="about" component={About} />
＜Route path="inbox" component={Inbox}>
  ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

上面的代码中，如果用户离开/messages/:id，进入/about时，会依次触发以下的钩子。

/messages/:id的onLeave
/inbox的onLeave
/about的onEnter

使用onEnter钩子可以替代Redirect组件（下面演示），也可以做一些验证提示等。这边就不再一一展开。

<Route path="inbox" component={Inbox}>
  <Route
    path="messages/:id"
    onEnter={
      ({params}, replace) => replace(`/messages/${params.id}`)
    } 
  />
</Route>

附参考文章：
React List - React Router掘金文档
阮一峰博客