React Router 免费文字视频教程（共9集）

学习这个文章之前，我默认你已经学习了前置的两篇文章，所以很多基础的内容我不会讲解。

1. React16免费视频教程（共28集）
2. Redux免费视频教程（共24集）

如果你基础还没有学习，我建议你先学习这两个视频教程，如果认证学，应该一个周末（两天）时间就可以学完，然后你再回来看这篇文章会轻松很多。

如果你正好在学习React，你可以加入QQ群:159579268，和小伙伴们一起讨论。

P01: React Router 安装和基础环境搭建

这节课我们就先安装一下React Router 学习开发的基础环境和作一个最简单的例子.

用creact-react-app脚手架初始化项目

1.如果你没有安装脚手架工具，你需要安装一下:

npm install -g create-react-app

如果你学了前边的课程，这一步一般都是完成的，可以省略掉。-g代表的是系统全局安装的意思。

2.直接使用脚手架工具创建项目

D:  //进入D盘
mkdir ReactRouterDemo   //创建ReactRouterDemo文件夹
cd ReactRouterDemo      //进入文件夹
create-react-app demo01  //用脚手架创建React项目
cd demo01   //等项目创建完成后，进入项目目录
npm  start  //预览项目

这样项目就制作好了，我们删除一下没用的文件，让代码结构保持最小化。删除SRC里边的所有文件，只留一个index.js,并且index.js文件里也都清空。

使用npm安装React Router

然后你可以在你的代码编辑工具中打开这个项目，我这里使用的是VSCode，其实用什么无所谓，但是如果你是新手，还是建议你和我使用一样的编辑器，这样能保证和视频中的演示过程一样。 按ctrl+~代开终端，然后进入demo01,在终端中用npm直接安装React Router.

npm install --save react-router-dom

安装完成后可以到package.json里看一下安装的版本，我目前安装的是5.0.1,你学习的时候版本可能不一样，也许有些API不适用，你可以在入门后自己到官网查看API学习。

编写一个最简单的路由程序

首先我们改写src文件目录下的index.js代码。改为下面的代码,具体的意思在视频中讲解:

import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

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

现在的AppRouter组件是没有的，我们可以在src目录下建立一个AppRouter.js文件，然后写入下面的代码。

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

function Index() {
  return <h2>JSPang.com</h2>;
}

function List() {
  return <h2>List-Page</h2>;
}

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}
export default AppRouter;

这时候就可以到浏览器中看一下效果了，如果一切正常，就可以实现页面跳转。但这只是最简单的页面跳转，第一节课先学这么多。

P02: 像制作普通网页一样使用ReactRouter

通过上节的学习，有小伙伴反应这和他们平时工作中见到的不太一样，现实中是每个页面都是一个完整的有状态组件，然后我们再进行跳转，而不是写在一个页面里的多个无状态组件。所以觉的不太适用，这节课就把上节课的案例，做成我们工作中的样子，或者说更贴合实际开发.还会讲解一下精确匹配的知识。

编写Index组件

先在/src目录下建立一个文件夹，我这里起名叫做Pages（你可以起任何名字），然后建立一个组件文件Index.js。这里边我们就完全安装工作中的模式来写，只是没有什么业务逻辑，UI也制作的相当加简单。代码如下：

import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>JSPang.com</h2> );
    }
}

export default Index;

编写List组件

编写完Index组件以后，继续编写List组件。其实这个组件和Index基本一样。代码如下:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
}

export default List;

修改AppRouter.js文件

两个组件制作完成后，我们把它引入路由配置文件，然后进行路由的配置就可以了，代码如下：

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AppRouter;

现在看起来就和我们实际工作中差不多了，也和我们平时写的普通html页面很类似了。

exact精准匹配的意思

这个也是一个小伙伴问我的问题，精准匹配到底是什么？其实这个很好理解，从字面上就可以猜出结果，就是你的路径信息要完全匹配成功，才可以实现跳转，匹配一部分是不行的。

比如我们把Index的精准匹配去掉，你会发现，无论你的地址栏输入什么都可以匹配到Index组件，这并不是我们想要的结果。

<Route path="/" component={Index} />

所以我们加上了精准匹配exact。你可以再试着访问一下List组件，来更深入的了解一下精准匹配。

这节课主要是解决小伙伴的疑问，第一节课确实会增加一些同学的学习成本，也是在讲课中的一些不足的地方的改进。

P03: ReactRouter动态传值-1

现在已经解决了链接跳转的问题，那现在想象这样一个场景，在一个很多文章的列表页面，然后点击任何一个链接，都可以准确的打开详细的文章内容，这就需要靠传递文章ID，然后后台准确检索文章内容最后呈现。这个过程每次传递到详细页面的ID值都是不一样的，所以就需要路由有动态传值的能力。

在Route上设置允许动态传值

这个设置是以:开始的，然后紧跟着你传递的key（键名称）名称。我们来看一个简单的例子。

<Route path="/list/:id" component={List} />

看过代码后，你会觉的很简单，就是在path上加:id。这样就设置了允许传值的规则。

Link上传递值

设置好规则后，就可以在Link上设置值了，现在设置传递的ID值了，这时候不用再添加id了，直接写值就可以了。

 <li><Link to="/list/123">列表</Link> </li>

现在就可以进行传值了。为了方便你的学习，这里给出全部AppRouter.js代码。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/123">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/:id" component={List} />
    </Router>
  );
}

export default AppRouter;

在List组件上接收并显示传递值

组件接收传递过来的值的时候，可以在声明周期componentDidMount中进行，传递的值在this.props.match中。我们可以先打印出来,代码如下。

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
    //-关键代码---------start
    componentDidMount(){
        console.log(this.props.match)
    }
    //-关键艾玛---------end
}

export default List;

然后在浏览器的控制台中可以看到打印出的对象，对象包括三个部分:

• patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
• url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
• params：传递过来的参数，key和value值。

明白了match中的对象属性，就可以轻松取得传递过来的ID值了。代码如下:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page->{this.state.id}</h2> );
    }
    componentDidMount(){
       // console.log(this.props.match.params.id)
       let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
}

export default List;

这样就实现了动态传值，需要注意的是如果你不传任何东西，是没办法匹配路由成功的。下一节我们更加形象的作一个动态列表，然后进行动态传值。这节课算是一个理论基础吧。

P04: ReactRouter动态传值-2

上节课动态传递的值是写死的，缺少灵活性，但是我讲了很多动态传值的理论，也算是对React Router动态传值有了初步认识。这节课形象的模拟一个动态的数据列表，并把列表中的值传递到详细页中。其实这节课的知识点上节课都已经讲过了，算是一个小练习吧。我需要在这里再次说明的是，你只看视频是什么都学不会的，你只有一遍看视频一遍敲出效果才可以学会，我也真心希望你能在这里学会。

模拟一个列表数组

现在可以在Index组件里模拟一个列表数组，就相当于我们从后台动态获取到的内容，然后数组中包括文章的cid和title。直接在state初始化时进行设置，代码如下：

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'技术胖的个人博客-1'},
            {cid:456,title:'技术胖的个人博客-2'},
            {cid:789,title:'技术胖的个人博客-3'},
        ]
    }
}

有了list数组后，再修改一下UI，进行有效的遍历，Render代码如下。

 render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

列表已经可以在Index组件里显示出来了，接下来可以配置<Link>了,在配置之前，你需要先引入Link组件。

import { Link } from "react-router-dom";

引入后直接使用进行跳转就可以，但是需要注意一点，要用{}的形式，也就是把to里边的内容解析成JS的形式，这样才能顺利的传值过去。

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.uid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}

到目前为止，已经很类似我们项目中的列表向详细页进行传值了。为了方便你学习，给出Index.js的所有代码.

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

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {uid:123,title:'技术胖的个人博客-1'},
                {uid:456,title:'技术胖的个人博客-2'},
                {uid:789,title:'技术胖的个人博客-3'},
            ]
         }
    }
    render() { 
        return ( 
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>
                               <Link to={'/list/'+item.uid}> {item.title}</Link> 
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

export default Index;

通过四小节的学习，你一定对React Router有了基本的了解，接下来的学习会稍微提升一点难度，所以你先要把这四小节课学好，练好.再向下进行。

P05: ReactRouter重定向-Redirect使用

在写这篇文章的时候哦，我看了一些相关的React Router Redirect的文章，讲的都是很繁琐，其实我认为写一篇入门文章并不是秀技术，而是让别人能看到，能做出来，并且以后可以自己深入。如果能作到这三点就算是一篇不错的文章。我认为Redirect(重定向)，你就掌握基本的两个知识点就可以了。

• 标签式重定向:就是利用<Redirect>标签来进行重定向，业务逻辑不复杂时建议使用这种。
• 编程式重定向:这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功挑战到会员中心页面。

重定向和跳转有一个重要的区别，就是跳转式可以用浏览器的回退按钮返回上一级的，而重定向是不可以的。

标签式重定向

这个一般用在不是很复杂的业务逻辑中，比如我们进入Index组件，然后Index组件,直接重定向到Home组件。我们也结合这个场景，看一下如何实现。

首先建立一个Home.js的页面，这个页面我还是用快速生成的方式来进行编写，代码如下。

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}

export default Home;

这个页面非常简单，就是一个普通的有状态组件。

有了组件后可以配置一下路由规则，也就是在AppRouter.js里加一个<Route>配置，配置时记得引入Home组件。

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

之后打开Index.js文件，从Index组件重新定向到Home组件，需要先引入Redirect。

import { Link , Redirect } from "react-router-dom";

引入Redirect后，直接在render函数里使用就可以了。

 <Redirect to="/home/" />

现在就可以实现页面的重定向。

编程式重定向

编程式重定向就是不再利用<Redirect/>标签，而是直接使用JS的语法实现重定向。他一般用在业务逻辑比较发杂的场合或者需要多次判断的场合。我们这里就不模拟复杂场景了，还是利用上边的例子实现一下，让大家看到结果就好。

比如直接在构造函数constructor中加入下面的重定向代码。

 this.props.history.push("/home/");  

就可以顺利实现跳转，这样看起来和上面的过程是一样的。这两种方式的重定向你可以根据真实需求使用，这样能让你的程序更加的灵活。课后你可以试着模拟用户的登录过程试着用一下这样的跳转。

P06: 实例-ReactRouter嵌套路由-1

这节课开始学习嵌套路由，这种路由形式在互联网上也是比较常见的。比如我们后台的管理系统，大部分是用嵌套路由，来实现页面的总体划分。当然前端页面也是会有很多嵌套路由的实现，比如我们经常看的掘金网站，里边多是嵌套路由（比如说掘金里的沸点）。

我们将通过几节课的时间来学习一下如何使用React Router中的嵌套路由，这也算是一个小实例，在这个过程中我们会复习以前的路由知识，并利用以前的知识构建有些复杂的路由关系。

用脚手架创建项目

重新创建一个项目Demo02,直接在VSCode里输入，下面的命令初始化项目代码。

create-react-app demo02

这样项目就创建好了，但是里边有很多暂时不需要的文件，删除这些，让代码结构保持最小化。只留/src目录里的index.js文件，然后再删除一些index.js文件里无用的代码。

项目初始化好以后，再在安装React Router,使用npm来进行安装(安装时记得要进入到Demo02文件夹中)。

npm install --save react-router-dom

初始化基本目录

根据草图分析，可以指导有两层关系，第一层是大类，第二层是子类别。先再/src目录下建立一个Pages的文件夹。然后在/Pages目录下再建立两个目录/video和/workPlace,然后在/src目录下建立一个AppRouter.js文件作为首页和路由的配置文件。目录结构如下所示:

- src
|--Pages
   |--video
   |--workPlace
|--index.js
|--AppRouter.js

建立完成后，我们先编写AppRouter.js,为的是让程序拥有首页，并让程序可以跑起来。文件新建以后可以用快速生成代码的方式，把基本代码做完。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

写完这个文件，然后修改一下/src/index.js文件，需要引入AppRouter，并进行Render渲染。

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


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

这时候就可以在终端里输入npm start让程序跑起来，然后去浏览器中进行查看了。

添加基本样式

在/src目录下，新建一个index.css文件，然后编写下面的样式。

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;

}

写完之后把这个CSS文件引入到AppRouter.js文件中，就可以有一定的样式了。然后再到浏览器中查看一下效果，如果能正常显示，说明到目前为止，我们制作的是正确的。

P07: 实例-ReactRouter嵌套路由-2

这节课我们就将最主要的知识点，嵌套路由。接着上节课我们继续添加我们的程序，把视频部分的嵌套路由制作完成。嵌套路由简单理解就是在子页面中再设置一层新的路由导航规则。

编写Video中的子页面

在编写Video.js页面之前，我们需要在/src/Pages/video下面建立三个子文件，分别是ReactPage.js,Flutter.js和Vue.js，也代表着不同的视频页面。

ReactPage.js组件

import React from "react";
function Reactpage(){
    return (<h2>我是React页面</h2>)
}
export default Reactpage;

Flutter.js组件

import React from "react";
function Flutter(){
    return (<h2>我是Flutter页面</h2>)
}
export default Flutter;

Vue.js组件

import React from "react";
function Vue(){
    return (<h2>我是Vue页面</h2>)
}
export default Vue;

这样就相当于三个页面做好了，当然咱们作的是非常简单的。

编写Video.js页面

这个页面就是二级导航的编写，这个的编写也是课程的重点。

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;

修改AppRouter.js文件

当我们的Video组件制作完成后，可以把它引入到AppRouter.js文件中，然后配置对应的路由。为了方便你的学习，这里给出了全部代码，并在重用修改的地方给予标注。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
//--关键代码------------start
import Video from './Pages/Video'
//--关键代码------------end
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    {/*--关键代码------------start*/}
                    <li><Link to="/video/">视频教程</Link> </li>
                    {/*--关键代码------------end*/}
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                 {/*--关键代码------------start*/}
                <Route path="/video/"   component={Video} />
                 {/*--关键代码------------end*/}
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

这时候就可以到浏览器中看看效果了，当然目前还没有CSS样式，所以不是很好看。

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

这样我们就实现了React Router的路由嵌套功能，看起来还是非常简单的。希望你可以学会，下节课我们把这个案例完善一下，写完整。

P08: 实例-ReactRouter嵌套路由-3

这节课把"职场技能"这个链接的嵌套路由也作了，如果你对嵌套路由已经很熟悉，可以跳过这节课，直接学习下一节课。但是你如果想把这个小实例作完整，你可以按照这节课来进行。

编写第三级子页面

在"职场技能"里只作两个子页面，"程序员加薪秘籍"和"程序员早起攻略"。在/src/Pages/workPlace目录下，新建两个文件Money.js和Getup.js，然后编写代码。

Money.js

import React from "react";
function Money(){
    return (<h2>程序员加薪秘籍详情</h2>)
}
export default Money;

Getup.js

import React from "react";
function Getup(){
    return (<h2>程序员早起攻略详情</h2>)
}
export default Getup;

编写二级子页面Workplace

在/src/Pages文件夹下建立一个Workplace.js页面，作为二级子页面。

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/Getup">程序员早起攻略</Link></li>

                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />

            </div>
        </div>
    )
}
export default WorkPlace;

这个组件完成后，可以进入主路由里把二级页面配置一下。

配置主路由AppRouter.js

这个我就直接给出文件代码了，思路是先引入要配置的路由Workplace,然后配置路由<Route>,最后编写链接<Link>。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="/workplace">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                <Route path="/video/"   component={Video} />
                <Route path="/workplace/"   component={Workplace} />
            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;

完成后，就可以再浏览器长查看一下效果，可以正常显示就说明一切正常，我们这个小案例也就算完成了。其实知识点并不多，主要是作个案例练习一下。下节课将讲解一下如何动态的获取路由地址，并进行路由配置。

P09: 后台动态获取路由进行配置

小案例做完了，我们对React Router也有了更加清楚的了解。有时候作一个后台管理系统，菜单并不是写死的，而是通过后台接口获得的，这时候我们要如何根据后台接口编写我们的路由。这节课就模拟下后台获取路由配置，并编写动态路由配置的方法。

模拟后台得到的JSON数据

我们现在AppRouter.js文件里，模拟从后台得到了JSON字符串，并转换为了对象（我们只是模拟，就不真的去远端请求数据了）。模拟的代码如下:

let routeConfig =[
    {path:'/',title:'博客首页',exact:true,component:Index},
    {path:'/video/',title:'视频教程',exact:false,component:Video},
    {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]

循环出Link区域

这时候一级导航就不能是写死了，需要根据得到的数据进行循环出来。直接使用map循环就可以。代码如下：

<ul>
    {
        routeConfig.map((item,index)=>{
            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
        })
    }
</ul>

这时候就可以把所有的Link标签都循环出来了。

循环出路由配置

按照上面的逻辑把Route的配置循环出来。代码如下:

{
    routeConfig.map((item,index)=>{
        return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
    })
}

为了方便你学习，这里给出AppRouter.js的全部代码。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;

到这里就可以实现动态显示路由了，并且可以后台进行配置了，但是这应该都是架构层考虑的东西了。如果你刚接触React，可能这种用法的不多。但是你可以利用这模式来设计你静态的路由，增加你程序的扩展性。希望你这节课能get到这个技能，也能在工作中尽量使用这种模式。

我觉的到这里你应该可以算是React-Router入门了，当让React-Router还有很多用法我没有讲到，以后我会出一个实例，来讲解这部分内容，希望你能持续关注博客(jspang.com)，每周三集视频。