0、参考文献

React Router 4 简易入门

一个中文文档，但不确定是否是官方的，例子比较多

初探 React Router 4.0 这个对标签的说明比较详细

react-router v4 如何静态传值给子组件

render和component的区别

0.1、React-router 安装

这里的版本号是 “react-router-dom”: “^4.2.2”

安装（不需要安装 react-router，直接安装 react-router-dom 就可以了）

npm install --save react-router-dom

下面这几行引自https://www.jianshu.com/p/e3adc9b5f75c

• react-router React Router 核心
• react-router-dom 用于 DOM 绑定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 静态路由配置的小助手

1、基本DEMO

DEMO地址
参考 1.baseDemo.js

首先引入对应的模块

import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

这三个都是标签名。

1. Router 表示路由包裹标签，另外2个应该放在这个标签里；
2. Link 表示导航标签，就是说点击这个后，会将 url 进行切换；
3. Route 表示模块标签，当当前的 url 符合 Route 标签的设置时，会将该标签显示出来；

基本示例：

import React from "react";
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const First = () => <div>第一个示例的第【1】个路由，第一个路由在第一个和第二个url里都会显示，但不在第三个显示</div>
const Second = () => <div>第一个示例的第【2】个路由，只在第二个url里显示</div>
const Third = () => <div>第三个示例</div>

class BaseDemo extends React.Component {
    render() {
        return <div>
            <h3>React-router基础示例</h3>
            <h3>路由数据被存储在 this.props.match 里，这是其中的值{JSON.stringify(this.props.match)}</h3>
            <Router>
                <div>
                    {/* this.props.match.url 表示当前url */}
                    <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li>
                    <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>
                    <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li>

                    <Route path={`${this.props.match.url}/1`} component={First}/>
                    <Route path={`${this.props.match.url}/2`} component={First}/>
                    <Route path={`${this.props.match.url}/2`} component={Second}/>
                    <Route path={`${this.props.match.url}/3`} component={Third}/>
                </div>
            </Router>
        </div>
    }
}

解释：

1. Router 标签内，只能放一个元素，一般是放一个 div 标签，然后其他标签放这个 div 标签里；
2. Link 标签是导航标签，类似 <a></a> 标签，点击后会跳转 url；
3. Route 标签是路由组件标签，当 path 属性和当前 url 相同时，会自动显示 component 属性中匹配的标签（所有匹配成功的都会显示）；

简单来说，就是 点击 Link 标签跳转 url，然后显示对应的 url 的组件。