在React中使用react-router-dom路由

使用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”。在页面中编写如下代码：

import React from 'react';

    export default class Home extends React.Component {
        render() {
            return (
                <div>
                    <a>去detail</a>
                </div>
            )
        }
    }

home.js

    import React from 'react';

    export default class Home extends React.Component {
        render() {
            return (
                <div>
                    <a>回到home</a>
                </div>
            )
        }
    }

detail.js
然后再新建一个路由组件，命名为“Router.js”，exact 表示默认入口，并编写如下代码：

    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 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')
    );

通过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>
            )
        }
    }

detail.js
重新打包运行，在浏览器地址栏输入“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);
    }
    ...

隐式传参
此外还可以通过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);
    }

replace
有些场景下，重复使用push或a标签跳转会产生死循环，为了避免这种情况出现，react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转：

    this.props.history.replace('/detail');

goBack
场景中需要返回上级页面的时候使用：

    this.props.history.goBack();