安装
首先进入项目目录，使用npm安装react-router-dom：
npminstallreact-router-dom--save-dev// 也可以使用cnpm代替npm命令
基本操作
我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码
home.js:
importReactfrom'react'; exportdefaultclassHomeextendsReact.Component { render() { return ( <div><a>去detail</a></div> ) } }
detail.js:
importReactfrom'react'; exportdefaultclassHomeextendsReact.Component { render() { return ( <div><a>回到home</a></div> ) } }
再新建一个路由组件，命名为“Router.js”，并编写如下代码：
importReactfrom'react'; import {HashRouter, Route, Switch} from'react-router-dom'; importHomefrom'../home'; importDetailfrom'../detail'; constBasicRoute= () => ( <HashRouter><Switch><Routeexactpath="/"component={Home}/><Routeexactpath="/detail"component={Detail}/></Switch></HashRouter>); exportdefaultBasicRoute;
如上代码定义了一个纯路由组件，将两个页面组件Home和Detail使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载响应的页面。
在入口文件中——这里指定的是index.js——编写如下代码：
importReactfrom'react'; importReactDOMfrom'react-dom'; importRouterfrom'./router/router'; ReactDOM.render( <Router/>, document.getElementById('root') );
相当于向页面返回了一个路由组件。先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”：
输入“http://localhost:3000/#/detail”：
通过a标签跳转
可以看到其实路由已经开始工作了，接下来再来做页面间的跳转。在home.js和detail.js中，代码修改如下：
home.js:
importReactfrom'react'; exportdefaultclassHomeextendsReact.Component { render() { return ( <div><ahref='#/detail'>去detail</a></div> ) } }
detail.js:
importReactfrom'react'; exportdefaultclassHomeextendsReact.Component { render() { return ( <div><ahref='#/'>回到home</a></div> ) } }
重新编译打包运行，在浏览器地址栏输入“http://localhost:3000/”。以上是使用a标签的href进行页面间跳转，此外react-router-dom还提供了通过函数的方式跳转页面。
通过函数跳转
首先需要修改router.js中的两处代码：
import {HashRouter, Route, Switch, hashHistory} from'react-router-dom'; <HashRouterhistory={hashHistory}>
在home.js中：
importReactfrom'react';
exportdefaultclassHomeextendsReact.Component { constructor(props) { super(props); } render() { return ( <div><ahref='#/detail'>去detail</a><buttononClick={() =>this.props.history.push('detail')}>通过函数跳转</button></div> ) } }
在a标签下面添加一个按钮并加上onClick事件，通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去，就可以在子组件中通过props调用history的push方法跳转页面。
很多场景下，我们还需要在页面跳转的同时传递参数，在react-router-dom中，同样提供了两种方式进行传参。
url传参
在router.js中，修改如下代码：
<Routeexactpath="/detail/:id"component={Detail}/>
然后修改detail.js，使用this.props.match.params获取url传过来的参数：
componentDidMount() { console.log(this.props.match.params); }
在地址栏输入“http://localhost:3000/#/detail/3”，打开控制台：
可以看到传过去的id=3已经被获取到了。react-router-dom就是通过“/:”去匹配url传递的参数。
隐式传参
此外还可以通过push函数隐式传参。修改home.js代码如下：
importReactfrom'react'; exportdefaultclassHomeextendsReact.Component { constructor(props) { super(props); } render() { return ( <div><ahref='#/detail/3'>去detail</a><buttononClick={() =>this.props.history.push({ pathname: '/detail', state: { id: 3 } })}>通过函数跳转</button></div> ) } }
在detail.js中，就可以使用this.props.history.location.state获取home传过来的参数：
componentDidMount() { //console.log(this.props.match.params);console.log(this.props.history.location.state); }
跳转后打开控制台可以看到参数被打印：
其他函数
replace
有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：
this.props.history.replace('/detail');
goBack
场景中需要返回上级页面的时候使用：
this.props.history.goBack();
嵌套路由
嵌套路由的适用场景还是比较多的，接下来就来介绍一下实现方法。
首先定义父级组件MainLayout
importReactfrom'react'; import'./MainLayout.scss'; const { Header, Sider, Content } =Layout; exportdefaultclassMainLayoutextendsReact.Component { render() { return ( <divclassName='main-layout'>父组件</div> ); } }
定义子组件Home：
importReact, {useState} from'react'; import {Modal, Select} from"antd"; import {connect} from'react-redux'; import {addCount} from'../../servers/home'; functionHome(props) { const [visible, setVisible] =useState(false); const {countNum: {count}, dispatch} =props; return ( <div>子组件</div> ) } exportdefaultHome;
将它们添加进路由router.js，并且关联父子关系：
importReactfrom'react'; import {HashRouter, Route, Switch} from"react-router-dom"; importHomefrom'../pages/Home/Home'; importMainLayoutfrom'../layout/MainLayout'; constBasicRouter= () => ( <HashRouter><Switch><Routepath="/index"component={ <MainLayout><Routeexactpath="/"component={Home}/><Routeexactpath="/index"component={Home}/><Routepath="/index/home"component={Home}/></MainLayout> }/></Switch></HashRouter>); exportdefaultBasicRouter;
在MainLayout中，修改如下代码：
importReactfrom'react'; import'./MainLayout.scss'; const { Header, Sider, Content } =Layout; exportdefaultclassMainLayoutextendsReact.Component { render() { return ( <divclassName='main-layout'> {this.props.children} </div> ); } }
如此，一个嵌套路由就完成了。
总结
这篇文章基本上涵盖了大部分react-router-dom的用法，此后发现有什么遗漏会再继续补充。
