React-Router 4.x

虽然个人自己编写了一套路由方式，但因为只是简单的重新渲染了页面，不能够实现“后退”“刷新”功能。所以自己研究了react-router在真实项目中的应用。一个简单的侧边栏+内容框。

首先你要创建一个纯净的react项目，此处不多讲。

1、安装react-router

yarn add react-router-dom 

或

npm install react-router-dom

2、修改添加文件目录

-src/
-Layout/ 存放侧边栏，标题栏等页面组件。
-page/ 存放页面

3、添加路由
修改router.js文件

import React,{Component} from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './home/home';
import Article from './article/article';
import Songs from './article/songs';
import Technology from './article/technology';
import UserMess from './userMess/userMess';

export default class Routers extends Component{
    render(){
        return(
            <Switch>
                <Route  exact path='/' component={Home}/>
                <Route  exact path='/article' component={Article}/>
                <Route  exact path='/article/songs' component={Songs}/>
                <Route  exact path='/article/technology' component={Technology}/>
                <Route  exact path='/userMess' component={UserMess}/>
            </Switch>
        )
    }
}

<Switch>标签，表明在这几个路由总，只会有一个匹配成功的路由返回。
为了更加明了，我们改一下代码：

… …
  {/* /:id  是一种动态传入路径的方法，比如点击<Link to="/article">article</Link>，此时/:id == /:article */}
  <Route  exact path='/:id' component={UserMess}/>
… …

这时候我们点击<Link to="/article">article</Link>，页面还是只会返回第一个匹配成功的Article页面

但如果我们将Switch换成普通的div，
再点击Articles:

可以看到，它加载了所有匹配成功的页面。所以根据需求使用Switch即可。

4、添加路由控制器
在router.js中配置了所有需要的页面后，我们需要侧边栏能够控制它的跳转，所以我们更改sider.js的代码

import React,{Component} from 'react';
import {
    Link
} from 'react-router-dom';

export default class Sider extends Component{
    componentDidMount(){
        console.log(Link)
    }
    render(){
        return (
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/home">Homes</Link></li>
                    <li><Link to="/article">Article</Link></li>
                    <li><Link to="/article/songs">Songs</Link></li>
                    <li><Link to="/article/technology">Technology</Link></li>
                    <li><Link to="/userMess">UserMess</Link></li>
                    <li></li>
                </ul>
            </div>
        )
    }
}

通过Link标签，来控制Route的页面。
这里要注意一下，Link标签中'to'指向的路径应该与Route中的'path'一一对应。
这样一个简单的路由变配置完成了。
这只是最基础的第一步。