在 React router 中通常使用的组件有三种：
路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
路径匹配组件: Route 和 Switch
导航组件: Link 和 NavLink
关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRouter>组件
1. 安装 npm install react-router-dom 2. 实例 import React, { Component, Fragment } from \'react\'; import { Provider } from \'react-redux\'; import { BrowserRouter, Route } from \'react-router-dom\'; import store from \'./store\'; import Header from \'./common/header\'; import Home from \'./pages/home\'; import Detail from \'./pages/detail\'; import Login from \'./pages/login\'; class App extends Component { render() { return ( <Provider store={store}> <Fragment> <BrowserRouter> <div> <Header /> <Route path=\'/\' exact component={Home}></Route> <Route path=\'/login\' exact component={Login}></Route> <Route path=\'/detail/:id\' exact component={Detail}></Route> </div> </BrowserRouter> </Fragment> </Provider> ) } } export default App; 3. 路由组件 BrowserRouter 和 HashRouterBrowserRouter（history模式） 和 HashRouter（hash模式）作为路由配置的最外层容器，是两种不同的模式，可根据需要选择。
history 模式： class App extends Component { render() { return ( <BrowserRouter> <Header /> <Route path=\'/\' exact component={Home}></Route> <Route path=\'/login\' exact component={Login}></Route> <Route path=\'/detail/:id\' exact component={Detail}></Route> </BrowserRouter> ) } } hash 模式： class App extends Component { render() { return ( <HashRouter> <Header /> <Route path=\'/\' exact component={Home}></Route> <Route path=\'/login\' exact component={Login}></Route> <Route path=\'/detail/:id\' exact component={Detail}></Route> </HashRouter> ) } } 4. 路径匹配组件: Route 和 Switch 一、Route: 用来控制路径对应显示的组件有以下几个参数：
4.1 path：指定路由跳转路径 4.2 exact: 精确匹配路由 4.3 component：路由对应的组件 import About from \'./pages/about\'; ··· ··· <Route path=\'/about\' exact component={About}></Route> 4.4 render： 通过写render函数返回具体的dom： <Route path=\'/about\' exact render={() => (<div>about</div>)}></Route>render 也可以直接返回 About 组件，像下面：
<Route path=\'/about\' exact render={() => <About /> }></Route> 但是，这样写的好处是，不仅可以通过 render 方法传递 props 属性，并且可以传递自定义属性： <Route path=\'/about\' exact render={(props) => { return <About {...props} name={\'cedric\'} /> }}></Route>然后，就可在 About 组件中获取 props 和 name 属性：
componentDidMount() { console.log(this.props) } // this.props： // history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …} // location: {pathname: "/home", search: "", hash: "", state: undefined, key: "ad7bco"} // match: {path: "/home", url: "/home", isExact: true, params: {…}} // name: "cedric" render 方法也可用来进行权限认证： <Route path=\'/user\' exact render={(props) => { // isLogin 从 redux 中拿到, 判断用户是否登录 return isLogin ? <User {...props} name={\'cedric\'} /> : <div>请先登录</div> }}></Route> 4.5 location: 将 与当前历史记录位置以外的位置相匹配，则此功能在路由过渡动效中非常有用 4.6 sensitive：是否区分路由大小写 4.7 strict: 是否配置路由后面的 \'/\' 二、Switch渲染与该地址匹配的第一个子节点 <Route> 或者 <Redirect>。
类似于选项卡，只是匹配到第一个路由后，就不再继续匹配：
<Switch> <Route path=\'/home\' component={Home}></Route> <Route path=\'/login\' component={Login}></Route> <Route path=\'/detail\' component={detail}></Route> <Redirect to="/home" from=\'/\' /> </Switch> // 类似于： // switch(Route.path) { // case \'/home\': // return Home // case \'/login\': // return Login // ··· ··· // }所以，如果像下面这样:
<Switch> <Route path=\'/home\' component={Home}></Route> <Route path=\'/login\' component={Login}></Route> <Route path=\'/detail\' component={detail}></Route> <Route path=\'/detail/:id\' component={detailId}></Route> <Redirect to="/home" from=\'/\' /> </Switch>当路由为/detail/1时，只会访问匹配组件detail, 所以需要在detail路由上加上exact:
<Switch> <Route path=\'/home\' component={Home}></Route> <Route path=\'/login\' component={Login}></Route> <Route path=\'/detail\' exact component={detail}></Route> <Route path=\'/detail/:id\' component={detailId}></Route> <Redirect to="/home" from=\'/\' /> </Switch> 注意：如果路由 Route 外部包裹 Switch 时，路由匹配到对应的组件后，就不会继续渲染其他组件了。但是如果外部不包裹 Switch 时，所有路由组件会先渲染一遍，然后选择到匹配的路由进行显示。 5. 导航组件: Link 和 NavLinkLink 和 NavLink 都可以用来指定路由跳转，NavLink 的可选参数更多。
Link两种配置方式：
通过字符串执行跳转路由 <Link to=\'/login\'> <span>登录</span> </Link> 通过对象指定跳转路由pathname: 表示要链接到的路径的字符串。
search: 表示查询参数的字符串形式。
hash: 放入网址的 hash，例如 #a-hash。