React Router v4 学习笔记

React Router如今已是React开发单页应用必备技能，自升级V4版本以来，许多核心API都进行了重写，践行路由即组件的概念，本文是我学习React Router V4以来的一些总结。

介绍

React-Router V4是react-router的一次重大更新，许多核心API都已改变，使用react-router4不须要对路由进行集中式配置，react-router 4的核心是一切皆组件。

react-router 4一共被拆分为三个包：react-router、react-router-dom、react-router-native，react-router提供了React Router的核心路由功能，包括Router, Route, Switch等，可是咱们不会直接使用它。react-router-dom和react-router-native提供在特定运行环境下的路由组件。若是你须要开发在浏览器中运行的Web应用，则应该安装react-router-dom。一样，若是你须要开发React Native应用程序，则应该安装react-router-native。这二者都将安装react-router做为依赖项。

react-router-dom

react-router使用react-router-dom做为浏览器端的路由，提供了BrowserRouter,Route,Link等api,经过DOM的事件控制路由。在Web开发过程当中，咱们更可能是使用react-router-dom。本文的讨论也仅限于react-router-dom。

安装

npm install react-router-dom --save
复制代码

使用

Router

react-router4的使用首先须要选择Router，Router用于包裹在应用最外层。Router有两种类型：HashRouter和BrowserRouter，其表现方式也有所不一样，使用时须要区分。

HashRouter与BrowserRouter

从表面区分HashRouter和BrowserRouter的方法就是HashRouter的url中有个#，例如localhost:3000/#，HashRouter经过hash值来对路由进行控制。若是你使用HashRouter，你的路由就会默认有这个#。

BrowserRouter的url中没有#，它的url如http://localhost:3001/user/login，BrowserRouter的原理是依赖HTML5的history API实现的路由机制。

HashRouter和BrowserRouter都具备basename属性，若是你的URL不是位于网站根目录，而是放在子目录里，你须要设置这个属性。以下：

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // 渲染为 <a href="/calendar/today">
复制代码

Route Route是Router的子元素，控制路径对应显示的组件。经常使用属性有exact、path以及component。 考虑如下代码：

<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} /> 复制代码

react-router4的路由是包含性的，多个Route能够同时进行匹配和渲染，exact控制到路径匹配成功时不会再继续向下匹配，在面代码中，咱们试图根据路径渲染 HomePage 或者 UsersPage。若是从Route删除了 exact 属性，那么在浏览器中访问 /users 时，HomePage 和 UsersPage 组件将同时被渲染。

Switch

在Router组件中的任意位置建立多个，但一般咱们会把它们放在同一个位置。使用 组件来包裹一组。 会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染。考虑以下代码：

<Switch>
  <Route exact path="/" component={DashBoard} /> <Route path="/user" component={User} /> </Switch> 复制代码

若是去掉Switch组件，当咱们访问/user的时候，路由会同时匹配“/”和/user，将同时渲染DashBoard和User组件。

Link vs NavLink

react-router4提供了两种导航API，用于页面切换，当页面切换时，页面不会从新加载，可是组件会被从新渲染。它们做用相同，但NavLink在匹配URL成功时，能够提供一些额外的样式能力。

Link

Link提供to属性控制跳转地址，可传入字符串或者对象。以下：

<Link to="/courses"/>to: object
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
复制代码

NavLink

NavLink能够给当前匹配成功的连接提供一个className类名，常在Tab导航中使用。

<nav>
  <NavLinkto="/app"exact activeClassName="active">Home</NavLink>
  <NavLinkto="/app/users"activeClassName="active">Users</NavLink>
  <NavLinkto="/app/products"activeClassName="active">Products</NavLink>
</nav>
复制代码

路径参数 在react router4中，match用于获取路径上的参数，match是使用渲染时传递到组件内的一个props，在react组件内部经过this.props.match获取match的属性， 考虑以下代码：

<Switch>
  <Route exact path="/" component={DashBoard} />
  <Route path="/user/:id" component={User} />
  <Route path="/user" component={User} />
</Switch>
复制代码

当访问http://localhost:3001/user/123时，打印this.props.match的内容。 match获取的属性主要有：

而后，经过this.props.match.params.id就能够获取路由匹配的id了。

withRouter

试想，若是组件没有经过渲染，该如何获取history、match、location等props呢？react router4提供了一个高阶组件withRouter。使用方法以下：

import { withRouter } from 'react-router-dom';
复制代码

使用withRouter有两种办法，第一种简洁的方法是使用装饰器，以下：

@withRouter
class AuthRoute extends React.Component {
}
复制代码

另外一种方法直接调用withRouter包裹原来的组件返回一个新的组件：

class Auth extends React.Component {

}
const AuthRoute = withRouter(Auth)
复制代码

经过以上两种方法，就能在组件内部使用路由的props了。以下：

const { match，location，history} = this.props;
复制代码

结语

关于react router4,本文只是讲解了一些经常使用的api和用法，须要学习的还有不少，这里只是开始。

参考

react router 官方文档

本文原发于个人博客：http://yanyuanfe.cn/2018/02/02/React%20Router%20V4%20%E5%85%A5%E9%97%A8/