1.1. 路由
路由：URL与处理器的映射。
浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。
1.2. Router安装
npm i react-router -save
1.3. Router使用
路由器Router就是React的一个组件，所以使用方式跟React组件使用方式一样。
import {Router ,Route,hashHistory} from 'react-router';
ReactDOM.render(<Router/>,document.getElementById('app'));Router组件本身只是一个容器，真正的东西（路由）要通过Route组件定义。
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
import Home from './components/home';
import About from './components/about';
ReactDOM.render(
<Router history={hashHistory}>
<Route path='/about' component={About}/>
</Router>,
document.getElementById('app')
);
Router: 路由器对象
history=hashHistoryRouter路由采用hash方式监听地址栏变化，并将URL解析（#后面的内容）为位置对象，路由器可以使用该位置对象（#后面的内容）来匹配路由并呈现正确的组件集。
http://localhost:8000/#/home <Route path='/home' component={Home} />
http://localhost:8000/#/about <Route path='/about' component={About} />
Route ：路由对象
path ：路径
component 显示的组件
1.4. Router嵌套
一个应用由多个组件构成，复杂的应用中，可能存在嵌套的问题。嵌套路由非常简单，你只需要做两件事情：
1、Route中配置嵌套的Route；
render((
<Router history={ hashHistory }>
<Route path="/" component={ App }>
<Route path="select" component={ Select }></Route>
<Route path="found" component={ Found }></Route>
<Route path="follow" component={ Follow }></Route>
<Route path="my" component={ My }>
<Route path=":myname" component={ MyName }></Route>
<Route path="mysex" component={ MySex }></Route>
</Route>
</Route>
</Router>
), document.getElementById('root'));
2、嵌套Route的父组件中使用{this.props.children}渲染子Route的组件即可；
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,hashHistory} from 'react-router';
import App from './components/App'
import Home from './components/home';
import About from './components/about';
ReactDOM.render(
<Router history={hashHistory}>
<Route path='/' component={App} >
<Route path='home' component={Home}/>
<Route path='about' component={About}/>
</Route>
</Router>,
document.getElementById('app')
);
Route / 中嵌套了”/home”和”/about”两个路由。
App.js
import React,{Component} from 'react';
class App extends Component{
render(){
return (<div>
<nav>
<ul>
<li><a href='https://tool.4xseo.com/article/199514.html'>首页</a></li>
<li><a href='https://tool.4xseo.com/article/199514.html'>关于我们</a></li></ul>
</nav>
<main>{this.props.children} //显示嵌套路由的组件</main>
</div>
);
}
}
export default App;
App组件的this.props.children属性就是子组件。
子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。
var routes = <Route path="/" component={App}>
<Route path="home" component={Home}/>
<Route path="about" component={About}/>
</Route>;
<Router routes={routes} history={hashHistory}/>
Route可以无限级的嵌套，只需要遵循响应结构即可，另外不要忘记在嵌套Route的父组件中使用{this.props.children}显示子路由组件。
1.5. path 属性
Route组件的path属性指定路由的匹配规则。如果未提供，路由器将尝试匹配子路由。
注意点：它将与父路由的路径相连，除非它以/开头，使其成为绝对路径。
<Route path='/' component={App} >
<Route path='home' component={Home}/>
<Route path='about' component={About}/>
</Route>1.5.1. 路径参数
URL参数：地址中可以传入参数，采用:paramName
<Route path='users/:userId' component={User}/>
路径中参数都会传入到组件，可以通过this.props.routeParams获取，比如获取userId,this.props.routeParams.userId。
1.6. IndexRoute组件
<Router history={hashHistory}>
<Route path='/' component={App} >
<Route path='home' component={Home}/>
<Route path='about' component={About}/>
</Route>
</Router>
配置了一个嵌套路径，但是访问“/”的时候，你会发现只有App组件本身的内容，只有一个导航菜单，可能我们想默认进入首页的时候就显示Home子组件，那么我们就需要IndexRoute。
IndexRoute：设置默认显示的子组件。
import {IndexRoute} from 'react-router';
<Router history={hashHistory}>
<Route path='/' component={App} >
<IndexRoute component={Home} /><Route path='home' component={Home}/>
<Route path='about' component={About}/>
</Route>
</Router>IndexRoute 把{Home}组件设置为默认加载显示的子组件，及路径为“/”,那么Route /home就可以删除了，然后把导航的路径修改为“#/”即可。
<li><a href='https://tool.4xseo.com/article/199514.html'>首页</a></li> <li><a href='https://tool.4xseo.com/article/199514.html'>首页</a></li>
1.7. IndexRedirect 组件(了解)
IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子路由。浏览器地址将会改变为”#/home”.
import {IndexRedirect} from 'react-router';
<Route path="/" component={App}>
＜IndexRedirect to="home" />
<Route path="home" component={Home} />
<Route path="about" component={About} />
</Route>
上面代码中，用户访问根路径时，将自动重定向到子组件Home。
1.8. Link 链接
Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。
<ul>
<li><a href='https://tool.4xseo.com/article/199514.html'>首页</a></li>
<li><a href='https://tool.4xseo.com/article/199514.html'>关于我们</a></li>
</ul>
与上面等价
import {Link} from 'react-router';
<ul>
<li><Link to='/'>首页</Link></li>
<li><Link to='about'>关于我们</Link></li>
</ul>
如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle或activeClassName属性。
<li><Link to='/' activeStyle={{color:'orange'}} onlyActiveOnIndex={true}>首页</Link></li>
<li><Link to='about' activeStyle={{color:'orange'}}>关于我们</Link></li>上面代码中，当前页面的链接的style会包含color:’orange’。
<ul>
<li><Link to='/' activeClassName='active' onlyActiveOnIndex={true}>首页</Link></li>
<li><Link to='/about' activeClassName='active'>关于我们</Link></li>
</ul> 上面代码中，当前页面的链接的class会包含active。
onlyActiveOnIndex ：如果为true,当前路径必须与路由路径完全匹配才为活动状态。默认为false,如果子路径为活动状态那么父路径也为活动，因为子路由路径总是包含父路由路径。
除了使用a、link标签之外导航到路由页面，也可以使用props中router对象,该属性是由路由器传入。
this.props.router.push("/about");1.9. IndexLink 链接
如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件。
这是因为对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，因为/会匹配任何子路由。而IndexLink组件会使用路径的精确匹配等效于<Link onlyActiveOnIndex={true}>。
<IndexLink to="/" activeClassName="active">首页</IndexLink>
1.10. 路由的回调
路由有三个回调函数：
onEnter(nextState, replace, callback?) 进入该路由时调用
onChange(prevState, nextState, replace, callback?) 当路由位置改变时调用，但路由本身不进入或离开。 例如，当路由的子项更改时，或当查询参数更改时，将调用此方法。
onLeave(prevState) 离开该路由时调用
<Route path='/about' component={About} onEnter={()=>{alert('你来了')}} onLeave={()=>{alert('你走了');}}/>1.11. 异步路由
路由可以通过采用异步的方式加载组件，从而达到按需加载的目的，大大提供了程序的运行速度。
实现异步路由，提供getComponent(nextState, callback)即可：
function asyncGetComponent(nextState, cb){
//异步加载
require.ensure([], function (require) {
//回调告诉路由器已经加载完毕
//null:没有错误
//require('./components/Async').default
cb(null, require('./components/Async').default)
});
}
<Route path='async' getComponent={asyncGetComponent} />
1.12. histroy 属性
Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
history属性，一共可以设置三种值。
browserHistory
hashHistory(#)
createMemoryHistory
如果设为hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似localhost/#/about。
import { hashHistory } from 'react-router'
render(
<Router history={hashHistory} routes={routes} />,
document.getElementById('app')
) 如果设为browserHistory，浏览器的路由就不再通过hash完成了，而显示正常的路径localhsot/about，背后调用的是浏览器的History API。
import { browserHistory } from 'react-router'
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
如果开发服务器使用的是webpack-dev-server，加上--history-api-fallback参数就可以了。
$ webpack-dev-server --inline --content-base . --history-api-fallback
createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。
const history = createMemoryHistory(location)