最近一直有培训机构加我微信和QQ对我进行辱骂，我出免费视频，你培训机构怎么了，市场那么大，你赚钱还不准人家自愿作免费吗？我就出，每周三集免费视频教程，目标1000集。
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。这是官方的解释，虽然足以解释React Router，但我觉的还不够重视这个插件。就目前我的工作经验所知，凡是React技术栈的项目（WEB和Native），都需要用到React Router。有了它你才可以构建复杂的应用程序，有了它才能使应用有层次感。如果没有React Router，我们智能用switch...case这样的语句，进行判断渲染，这非常的麻烦，而且不可用；但是有了React Router一切就变的简单了。
学习这个文章之前，我默认你已经学习了前置的两篇文章，所以很多基础的内容我不会讲解。
如果你基础还没有学习，我建议你先学习这两个视频教程，如果认证学，应该一个周末（两天）时间就可以学完，然后你再回来看这篇文章会轻松很多。
如果你正好在学习React，你可以加入QQ群:159579268，和小伙伴们一起讨论。
P00: React Router 视频合集列表
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)，每周三集视频。
