之前学习了第三版的react-router，可是第四版的改动太大了，设计理念和基本用法也不同了，完全可以看作另一个路由插件来学习。
react-router现在分为两个部分。一个是针对浏览器运行的react-router-dom。一个是针对React Native应用的react-router-native。今天先写一篇针对web环境的笔记。要在浏览器端使用react-router V4，直接安装react-router-dom即可，他会自动下载react-router作为依赖。
npm i react-router-dom --save
大多数的路由插件都是在应用初始化的时候配置路由规则，react-router第四版之前也是这样：我们先在js中定义好Router中路径和组件的关联，然后导入应用中。也就是说，对整个应用而言，路由是静态的，写死的。
但是第四版，作者对插件做了大幅改动，他们称之为‘动态路由’。此时<Route>就和React的组件一样，可根据需要生成和销毁，可嵌套在其他组件中。而<Route>本身会将其path特性的路径和当前url匹配，如果匹配成功就渲染UI。所以从效用上，<Route>标签和React的视图组件完全一样，除了多了个路由功能。
--开始---
<Route>
<Route>是React-Router最重要的组件。它有个path特性，如果path和当前url匹配，它会渲染视图，至于渲染什么东西，主要看<Route>中的render方法：
1.component：url匹配时渲染component指定的组件。
<Route exact path="/" component={Home}/>
2.render：函数，url匹配时返回JSX作渲染。
1 <Route exact path={match.url} render={() => ( 2 <h3>Please select a topic.</h3> 3 )}/>
3.chidlren：函数，不管url是否匹配，都返回JSX进行渲染。不匹配时match === null。
1 <ul> 2 <ListItemLink to="/somewhere"/> 3 <ListItemLink to="/somewhere-else"/> 4 </ul> 5 6 const ListItemLink = ({ to, ...rest }) => ( 7 <Route path={to} children={({ match }) => ( 8 <li className={match ? 'active' : ''}> 9 <Link to={to} {...rest}/> 10 </li> 11 )}/> 12 )
如上，ListItemLink返回一个<Route>，这个<Route>组件将被渲染成<li>。url匹配的<li>将添加active样式。
并且，这三个方法都可以传入三个route props，他们都携带和当前路由有关的信息：
match：是个对象,带有params、url、isExact、path四个属性.
params（obj）：当前url动态路径的参数。
isExact：url是否完全匹配：
url（string）：当前url的匹配部分。
path（string）：用于匹配的路径。
history：初学的时候可以先不管它。虽然对外暴露为一个route props。文档提到，‘history’和‘history object’都指向一个叫‘history package’的东西。它是除了React外，ReactRouter另一个主要依赖。它提供了在不同环境下在js层管理session history的实现。相关的history术语还有“browser history”、“hash history” 、“memory history”，这些history对象都有一只的典型的属性和方法，详见history.
location:其意义和location.href一样。表示app的当前位置，或将要去往哪（对其赋值）。它是一个对象形式，如：
1 { 2 key: 'ac3df4', // not with HashHistory! 3 pathname: '/somewhere' 4 search: '?some=search-string', 5 hash: '#howdy', 6 state: { 7 [userDefined]: true 8 } 9 }
这个对象将在上面提到的route的三个渲染方法中出现，作为其prop。在withRoute中也出现。
<Router>：V4中所有Router组件都基于这个底层实现
<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>
这几个Router是react-router应用中使用率比较高的，不过目前看最常用的是<BrowserRouter>和<HashRouter>。
前面提到，v4之前都采用声明式路由，但v4开始“路由即组件”，路由组件和app的组件更深入地耦合了，看一个例子：
1 const Nav = ()=>( 2 <Router> 3 <div> 4 <ul> 5 <li><Link to='/home' >Home</Link></li> 6 <li><Link to='/about'>About</Link></li> 7 <li><Link to='/else'>Else</Link></li> 8 </ul> 9 10 <Route path='/home' component={Home} /> 11 <Route path='/about' component={About} /> 12 <Route path='/else' component={Else} /> 13 </div> 14 </Router> 15 ); 16 17 export default Nav;
在v3中，由于路由规则是预先定义好的，所以只要url跳到某个路径，页面就会重新渲染（跳转）。但是v4中Link和Route必须在同一个Router下，Link点击后Router才会响应并渲染。
如果把Link放到一个Nav组件，把Route放到一个Container组件，然后将他们导入App。
App>Nav+Container
点击Nav中的Link，Container中的Route将不会渲染。这个是需要注意的。
另外，Route也能接受动态参数。
<Route path="list/:id"></Route>
<Link to="list/12"></Link>
获取参数值：{ this.props.match.params.id }
<Switch>
React-Router中提供的Switch组件，意义上和一部的switch语句一样，会将第一个匹配的Route渲染出来。
直接使用一组<Route>和将一组<Route>包含在<Switch>中有什么区别呢？
*纯粹是用一组Route，只要path和url匹配，Route就会渲染出来。如果有两个Route的path都匹配url，这两个Route都会被渲染。
*使用<Switch>来包裹一组Route，只有第一个匹配的Route会被渲染。
嵌套：
由上面的例子可知，Router>Link+Route的模式中，Route充当了视图（或者说页面）的角色，子级的Router>Link+Route可以嵌套在一个Route绑定的组件中，从而达到嵌套路由的目的。
不过此时子级路由的Link和Route的路径要写绝对路径。