react-router非常复杂整体，比vue-router强大很多，好好研究，对你自身能力提高很有帮助
1. 安装
cnpm install react-router --save 包含react router核心
cnpm install react-router-dom --save 包含react router的dom绑定
2. BrowserRouter
BrowserRouter是react路由的容器
相关属性如下
basename，用来设置路由的基础链接，<BrowserRouter basename="/api" />
getUserConfirmation，用来拦截Prompt组件，并且决定是否跳转，我专门做了一个例子
forceRefresh，用来设置是否强制浏览器整体刷新，默认是false
keLength，用来设置location.key的长度，默认是6，可以自定义
注意，BrowserRouter只能有一个子节点
3. BrowserRouter属性getUserConfirmation的使用例子
由于默认是用的window.confirm做验证，很丑，可以自己定义
使用必须导入Prompt这个组件是用来传递确认信息的
import React from 'react'
import ReactDOM from 'react-dom'
import { Prompt } from 'react-router'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const MyComponent1 = () => (
<div>组件一</div>
)
const MyComponent2 = () => (
<div>组件二</div>
)
class MyComponent extends React.Component {
render() {
const getConfirmation = (message,callback) => {
const ConFirmComponent = () => (
<div>
{message}
<button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定</button>
<button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>
</div>
)
ReactDOM.render(
<ConFirmComponent />,
document.getElementById('root1')
)
}
return (
<Router getUserConfirmation={getConfirmation}>
<div>
<Prompt message="Are you sure you want to leave?" />
<Link to="/a">跳转组件二</Link>
<Route component={MyComponent1}/>
<Route exact path="/a" component={MyComponent2}/>
</div>
</Router>
)
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
)
4. HashRouter
，这个是用来兼容老浏览器的，略
5. Link
Link的作用和a标签类似
属性
to
接受path字符串，<Link to="/a" />
接受对象
<Link to={{
pathname: '/courses', // 传递的pathname
search: '?sort=name', // 传递的url参数
hash: '#the-hash', // 在url参数后面的hash值
state: { fromDashboard: true } // 自定义属性存在location中
}}/>
replace，设置为true，会取代当前历史记录
6. NavLink
NavLink和Link一样最终都是渲染成a标签，NavLink可以给这个a标签添加额外的属性
<NavLink to="/a">组件一</NavLink> 当点击此路由，a标签默认添加一个名为active的class
属性
activeClassName 用于自定义激活a标签的class
activeStyle 用于设置激活a标签的样式
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
exact，当路径百分百匹配的时候才展示样式和class，但是不影响路由的匹配，"/a"和"/a/" 是相等的
strict，这个比exact还很，就算 "/a"和"/a/" 也是不相等的
isActive，此属性接收一个回调函数，用来做跳转的最后拦截
<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
const oddEvent = (match, location) => {
console.log(match,location)
if (!match) {
return false
}
console.log(match.id)
return true
}
match里面保存了路由匹配信息的参数，是动态化的
location里面保存的Link中的to传递的所有信息
location，此参数用来接受一个location对象，如果对象信息和当前的location信息对象匹配则跳转
<NavLink to="/a/123" location={{key:"mb5wu3",pathname:"/a/123"}}/>
7. Prompt
Prompt是用来提示用户是否要跳转，给用户提示信息默认使用window.confirm，可以结合getUserConfirmation构建自定义提示信息
import { Prompt } from 'react-router'
属性
message
传递字符串，用于提示用户的展示信息
传递函数，可以接受location对象作为参数
<Prompt message={location => {
console.log(location);
return true
}}/>
return true表示可以直接跳转，无需验证
return '你好'表示要给提示给用户的信息
when，接受一个布尔值，表示是否执行prompt
8. MemoryRouter
主要用于native端，路由历史不通过URL缓存，而是保存在内存中
也就是说，地址栏地址不变，而在内存中保存路由信息，当浏览器刷新时，自动跳回路由首页
还是可以通过访问location对象得到路由信息
import { MemoryRouter } from 'react-router'
属性
initialEntries 一个数组用来传递路由的初始匹配值
<MemoryRouter initialEntries={["/a","/b"]}>...</MemoryRouter>
数组成员可以是字符串也可以是location对象，成员的默认顺序是最左边的展示出来
initialIndex 用来确定initialEntries数组展示路由的索引
<MemoryRouter initialIndex={1} initialEntries={["/a","/b"]}>...</MemoryRouter>
getUserConfirmation 和上面讲的一样
keyLength 也是用来设置location.key的长度的
9. Redirect
路由重定向
import { Redirect } from 'react-router'
使用这个 <Redirect to="/a" /> 代替组件使用
属性
to
字符串，要重定向的路径
对象，location对象
push，布尔值，是否将当前路径存到history中（是Link标签的to路径）
from，用来指定路由的原始值，如果不是给定的字符串，那么不渲染，反之渲染，只能用于switch组件中
10. Route
Route的作用就是用来渲染路由匹配的组件
路由渲染有三种方式，每一种方式都可以传递match,location,history对象
component
用来渲染组件
<Route path="/a" component={MyComponent1}></Route>
render
用来渲染函数式组件，可以防止重复渲染组件
<Route path="/b" render={({match,location,history}) => {
console.log(match,location,history);
return <div>组件二</div>
}}></Route>
children
和render差不多，不过可以用来动态的展示组件
差別之处在于，children会在路径不匹配的时候也调用回调从而渲染函数，而render只会在路径匹配的时候触发回调
<Route path="/b" children={({match,location,history}) => {
return (
match ? <div>组件二</div>:<div>组件二二</div>
)
}}></Route>
属性
path，字符串，匹配的路径
exact，布尔值，路径完全匹配的时候跳转 "/a/"和"/a"是一样的
strict，布尔值，单独使用和没有使用这个属性没有任何区別，如果和exact一起使用可以构建更为精确的匹配模式。"/a/"和"/a"是不同的
location，传递route对象，和当前的route对象对比，如果匹配则跳转，如果不匹配则不跳转。另外，如果route包含在swicth组件中，如果route的location和switch的location匹配，那么route的location会被switch的location替代
11. Router
低级路由，适用于任何路由组件，主要和redux深度集成，使用必须配合history对象
使用Router路由的目的是和状态管理库如redux中的history同步对接
关于history插件的使用请看 http://www.cnblogs.com/ye-hcj/p/7741742.html
import { Router } from 'react-router'
import { createBrowserHistory } from 'history/createBrowserHistory'
const history = createBrowserHistory();
<Router history={history}>
...
</Router>
12. StaticRouter，
静态路由，主要用于服务端渲染，暂不涉及
13. Switch
Switch组件内部可以是Route或者Redirect，只会渲染第一个匹配的元素
属性
location
Switch可以传递一个location对象，路由匹配将和这个location对象进行比较，而不是url
Route元素会比较path，Redirect会比较from，如果他们没有对应的属性，那么就直接匹配
14. history
这里的history对象是使用history插件生成的，http://www.cnblogs.com/ye-hcj/p/7741742.html已经详细讲过了
记住一点，再使用location做对比的使用，通过history访问的location是动态变化的，最好通过Route访问location
15. location
location对象表示当前的路由位置信息，主要包含如下属性
{
hash: undefined,
key: "k9r4i3",
pathname: "/c",
state: undefined,
search: ""
}
16. match
match对象表示当前的路由地址是怎么跳转过来的，包含的属性如下
{
isExact: true, // 表示匹配到当前路径是否是完全匹配
params: {}, // 表示路径的动态参数值
path: '/c', // 匹配到的原始路径
url: '/c' // 匹配到的实际路径
}
17. matchPath
matchPath也是和后端相关的，主要作用就是生成一个match对象
import { matchPath } from 'react-router'
const match = matchPath('/a/123',{
path: '/a/:id',
exact: true,
strict: false
})
第一个参数是pathname
第二个参数是一个对象，里面的属性和route的属性类似，用来和pathname做对比
如果匹配的话，就产生一个match对象，反之，null
18. withRouter
当一个非路由组件也想访问到当前路由的match,location,history对象，那么withRouter将是一个非常好的选择
import { withRouter } from 'react-router'
const MyComponent = (props) => {
const { match, location, history } = this.props
return (
<div>{props.location.pathname}</div>
)
}
const FirstTest = withRouter(MyComponent)
参考文档：
react-router
网友评论