React之router路由库---（参考jsPang）
前言：
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。
这是官方的解释，虽然足以解释React Router，但我觉的还不够重视这个插件。就目前我的工作经验所知，凡是React技术栈的项目（WEB和Native），都需要用到React Router。
有了它你才可以构建复杂的应用程序，有了它才能使应用有层次感。如果没有React Router，我们只能用switch...case这样的语句，进行判断渲染，这非常的麻烦
大纲：
01_ReactRouter开发环境配置和安装 02_ReactRouter精确匹配和页面分离 03_ReactRouter动态传值-1 04_ReactRouter动态传值-2 05_ReactRouter重定向-Redirect使用 06_ReactRouter嵌套路由-1 07_ReactRouter嵌套路由-2 08_ReactRouter嵌套路由-3 09_后台动态获取路由进行配置
（1）01_ReactRouter开发环境配置和安装
首先安装相关依赖，如下所示
>npm i react-router-dom --save
接下来进行引入，router代表路由器、route代表线路
接下来写2个无状态组件
然后渲染导出
此时便完成了导航的简单应用
（2）02_ReactRouter精确匹配和页面分离
接下来按照开发时的格式来创建案例
首先创建页面目录src/pages，然后在里面创建两个组件文件
然后在跟组件引入
然后开始使用
注意：
exact为精确匹配，首页一般为/，需要加上精确匹配exact属性
（3）03_ReactRouter动态传值-1（四部曲）
如下所示，每打开一个文章，都会在url里传入一个具体值，然后进行调页
路由的动态传值大致可以分为4步
1、设置规则 2、传递值 3、接受值 4、显示内容
1、设置规则
如上所示：代表可以传值，这便是传递规则
此时因为Link跳转时没有传值，所以显示时显示不出。如果在url里写入localhost:3000/list/123，才可以匹配渲染，如下所示
由此便可以验证出，规则已经定义好了。接下来开始下面步骤
2、传递值
3、接收值
接下来开始在对应组件里接收路由传递的值
输如下
params为获取传递值
path为路由传递规则
url为路由传递值
接下来做下测试
如果传值为456，则页面里也会对应显示路由传值
（4）04_ReactRouter动态传值-2（列表项动态传值）
将首页内容改为列表，点击时跳转到对应详情页
此时列表显示完毕
接下来引入Link
然后使用Link，进行动态传值（注意：这里需要结合{}的JS代码进行动态传入）
此时便可进行动态传值并跳转，如下所示
（5）05_ReactRouter重定向redirect-重定向使用（2种形式）
主要介绍两种重定向形式
1、标签跳转 2、编程式跳转
重定向和普通跳转的区别
常见的普通跳转，在跳转后可以返回上一页或者前进到下一页，而redirect重定向则无法进行前进后退
1、标签式跳转
例如输入localhost:3000时，重定向到home组件
然后进行引入
首先需要引入Redirect
然后开始使用
此时浏览器访问localhost:3000便会重定向到localhost:3000/home
至此便实现了标签式重定向<Redirect></Redirect>，但是标签式重定向不满足复杂场景的重定向。
2、编程式重定向
直接利用props的history属性的push方法即可。该方式使用较为广泛，例如登录成功后跳转到指定页面等等... ...
（6）06_ReactRouter嵌套路由-1
案例：
接下来开始编写案例，首先重新创建项目并初始化，删除其他文件，如下所示
新建嵌套路由组件的目录
然后创建跟组件
编写组件，同样，这里我们使用无状态组件。首先编写左侧的一级导航
接下来编写右侧区域
最后暴露出去
接下来引入并建立对应的组件
最后在入口文件引入即可
引入css样式
注意：
这种css引入方式，实际是将css看作模块进行引入编译，必须以webpack为基础
此时样式如下
（7）07_ReactRouter嵌套路由-2
接下来编写二级导航的3个对应页面
1、首先编写video视频导航下的嵌套页面
此时3个页面便创建完毕
接下来编写二级页面，即点击一级导航“视频教程”后，在页面里显示对应列表，然后点击对应列表项后，跳转到三级页面。
然后开始编写二级导航和对应的渲染
接下来在跟组件引入
然后引入后开始配置路由
此时效果如下，二级导航下，点击对应导航时将会渲染不同页面
最后引入样式
（8）08_ReactRouter嵌套路由-3
本节主要完善职场技能的二级导航
接下来编写二级页面，即点击一级导航“职场技能”后，在页面里显示对应列表，然后点击对应列表项后，跳转到三级页面。
大体流程和之前的Video视频教程一致。
（9）09_后台动态获取路由进行配置
目前为止的路由设置都是写死的，后台操作一般会涉及到权限，即登录时将对应权限结合路由进行分配
接下来介绍下后台获取路由动态配置，本节只模拟一级导航
这里的routeConfig便可以理解为从后台获取的路由数据，接下来遍历数组，首先遍历导航Link
此时查看页面，发现循环正常。同理，替换掉下面的Route显示区
建议将路由配置项改为数组形式，当导航较多时可以降低维护成本，减少出错几率
.
