react-router实用4.2.0
react-router非常复杂整体，比vue-router强大很多，好好研究，对你自身能力提高很有帮助
-
安装
cnpm install react-router --save 包含react router核心 cnpm install react-router-dom --save 包含react router的dom绑定 -
BrowserRouter
BrowserRouter是react路由的容器 相关属性如下 basename，用来设置路由的基础链接，<BrowserRouter basename="/api" /> getUserConfirmation，用来拦截Prompt组件，并且决定是否跳转，我专门做了一个例子 forceRefresh，用来设置是否强制浏览器整体刷新，默认是false keLength，用来设置location.key的长度，默认是6，可以自定义 注意，BrowserRouter只能有一个子节点 -
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') ) -
HashRouter，这个是用来兼容老浏览器的，略
-
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，会取代当前历史记录 -
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"}}/> -
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 -
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的长度的 -
Redirect
路由重定向 import { Redirect } from 'react-router' 使用这个 <Redirect to="/a" /> 代替组件使用 属性 to 字符串，要重定向的路径 对象，location对象 push，布尔值，是否将当前路径存到history中（是Link标签的to路径） from，用来指定路由的原始值，如果不是给定的字符串，那么不渲染，反之渲染，只能用于switch组件中 -
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替代 -
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> -
StaticRouter，静态路由，主要用于服务端渲染，暂不涉及
-
Switch
Switch组件内部可以是Route或者Redirect，只会渲染第一个匹配的元素 属性 location Switch可以传递一个location对象，路由匹配将和这个location对象进行比较，而不是url Route元素会比较path，Redirect会比较from，如果他们没有对应的属性，那么就直接匹配 -
history
这里的history对象是使用history插件生成的，http://www.cnblogs.com/ye-hcj/p/7741742.html已经详细讲过了 记住一点，再使用location做对比的使用，通过history访问的location是动态变化的，最好通过Route访问location -
location
location对象表示当前的路由位置信息，主要包含如下属性 { hash: undefined, key: "k9r4i3", pathname: "/c", state: undefined, search: "" } -
match
match对象表示当前的路由地址是怎么跳转过来的，包含的属性如下 { isExact: true, // 表示匹配到当前路径是否是完全匹配 params: {}, // 表示路径的动态参数值 path: '/c', // 匹配到的原始路径 url: '/c' // 匹配到的实际路径 } -
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 -
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)