一、前言
在React SPA项目开发过程中，路由跳转必不可少。本篇博文主要介绍下React中路由相关知识。
在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
二、安装
首先进入项目目录，使用npm安装react-router-dom：
npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
复制代码
三、基本操作
然后我们新建两个页面，分别命名为“home”和“detail”。在页面中编写如下代码：home.js
import React from 'react';export default class Home extends React.Component { render() { return ( <div> <a>去detail</a> </div> ) }}
复制代码
detail.js
import React from 'react';export default class Home extends React.Component { render() { return ( <div> <a>回到home</a> </div> ) }}
复制代码
然后再新建一个路由组件，命名为“router.js”，并编写如下代码：
import React from 'react';import {HashRouter, Route, Switch} from 'react-router-dom';import Home from '../home';import Detail from '../detail';
const BasicRoute = () => ( <HashRouter> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/detail" component={Detail}/> </Switch> </HashRouter>);
export default BasicRoute;
复制代码
如上代码定义了一个纯路由组件，将两个页面组件 Home 和 Detail 使用Route组件包裹，外面套用Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会自动加载相应的页面。
然后在入口文件index.js编写如下代码：
import React from 'react';import ReactDOM from 'react-dom';import Router from './router/router';
ReactDOM.render( <Router/>, document.getElementById('root'));
复制代码
这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果，在地址栏输入“http://localhost:3000/#/”。
四、通过 a 标签跳转
可以看到其实路由已经开始工作了，接下来我们再来做页面间的跳转。在 home.js 和 detail.js 中，我们修改如下代码：
import React from 'react';export default class Home extends React.Component { render() { return ( <div> <a href='#/detail'>去detail</a> </div> )}}
复制代码
home.js
import React from 'react';export default class Home extends React.Component { render() { return ( <div> <a href='#/'>回到home</a> </div> ) }}
复制代码
重新打包运行，在浏览器地址栏输入“http://localhost:3000/”，试试看页面能否正常跳转。如果不能，请按步骤一步一步检查代码是否有误。以上是使用a标签的href进行页面间跳转，此外react-router-dom还提供了通过函数的方式跳转页面。
五、通过函数跳转
首先我们需要修改 router.js 中的两处代码：
...import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';...<HashRouter history={hashHistory}>...
复制代码
然后在 home.js 中：
import React from 'react';
export default class Home extends React.Component { constructor(props) { super(props); } render() { return ( <div> <a href='#/detail'>去detail</a> <button onClick={() => 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中，修改如下代码：
...<Route exact path="/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 代码如下：
import React from 'react';export default class Home extends React.Component { constructor(props) { super(props); } render() { return ( <div> <a href='#/detail/3'>去detail</a> <button onClick={() => 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);}
复制代码
跳转后打开控制台可以看到参数被打印。
六、其他函数
6.1 replace
有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：
this.props.history.replace('/detail');
复制代码
6.2 goBack
场景中需要返回上级页面的时候使用：
this.props.history.goBack();
复制代码
七、嵌套路由
嵌套路由的适用场景还是比较多的，接下来就来介绍一下实现方法。
在Vue中实现嵌套路由，只需要将配置文件写成children嵌套，然后在需要展示子路由的位置加上<router-view></router-view>即可。React中应该如何实现呢？其原理和Vue类似，只需要在父级路由中包含子路由即可。
首先定义父级组件 MainLayout
import React from 'react';import './MainLayout.scss';const { Header, Sider, Content } = Layout;export default class MainLayout extends React.Component { render() { return ( <div className='main-layout'> 父组件 </div> ); }}
复制代码
然后定义子组件 Home：
import React, {useState} from 'react';import {Modal, Select} from "antd";import {connect} from 'react-redux';import {addCount} from '../../servers/home';function Home(props) { const [visible, setVisible] = useState(false); const {countNum: {count}, dispatch} = props; return ( <div> 子组件 </div> )}
export default Home;
复制代码
然后将它们添加进路由 router.js，并且关联父子关系：
import React from 'react';import {HashRouter, Route, Switch} from "react-router-dom";import Home from '../pages/Home/Home';import MainLayout from '../layout/MainLayout';
const BasicRouter = () => ( <HashRouter> <Switch> <Route path="/index" component={ <MainLayout> <Route exact path="/" component={Home}/> <Route exact path="/index" component={Home}/> <Route path="/index/home" component={Home}/> </MainLayout> }/> </Switch> </HashRouter>);
export default BasicRouter;
复制代码
在 MainLayout 中，修改如下代码：
import React from 'react';import './MainLayout.scss';const { Header, Sider, Content } = Layout;export default class MainLayout extends React.Component { render() { return ( <div className='main-layout'> {this.props.children} </div> ); }}
复制代码
如此，一个嵌套路由就完成了。
八、拓展阅读
评论