react-router-dom

简介

使用React构建的单页面应用，使用路由实现页面跳转。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。
react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。
react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。
react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。基于浏览器环境的开发，只需要安装react-router-dom；基于react-native环境的开发，只需要安装react-router-native。npm会自动解析react-router-dom包中package.json的依赖并安装。
本文主要简述react-router-dom的使用

使用

新建路由组件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;

然后index.js中引入本路由组件并渲染

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

自此，url路由到组件的匹配过程完成，可以使用a标签或Link组件进行路由的跳转，Link从react-router-dom引入

<Link to='/detail'>点击跳转至Detail页面</Link>

也可以使用函数改变路由。函数如下：

this.props.history.push('/detail')
// 此处应注意，只有组件是路由组件（即某一路由直接对应的组件）时可以直接这样使用
// 否则需要引入react-router-dom的withRouter函数，并使用装饰器在本组件上方@withRouter后
// this.props.history对象才存在