React.js 入门系列之Router

今天开始学习React.js router 系列 （参考来自技术胖视频系列，如有不足请指出）

安装：npm install --save react-router-dom

首先新建Demo工程 mkdir ReactRouter（我是在E盘）

全局安装React npm install -g create-react-app cd ReactRouter

create-react-app demo01

安装完成后 把src文件夹下的除index.js文件外都删除

新建page文件夹（这个看你们自己起名字哈）

page文件下新建两个js文件

index.js

List.js

src下新建AppRouter.js 目录为：

好，以上操作完成，就可以开始我们的编写代码阶段了。

首先编写的是我们的page文件夹下面的文件
index.js
 ps:建议安装插件Simple React snippets 具体安装方式，点击左侧的扩展 搜索

使用快捷键 imrc 生成 import 项
使用快捷键 ccc 生成 class类
然后长这样 

ps: 假如你已有react.js基础的话，应该可以看懂，如果没有后续我会有基础系列文章哟，可关注我。。。 List.js 里面的内容和index.js里面的内容一样，毕竟只是初探讨

接下来 就到了我们的router文件的正式编写了： AppRouter.js

雷打不动的先引入我们的react

然后需要引入我们的react router了

React Router 有三种类型组件：路由器组件，路线匹配组件和导航组件 路由器组件有两种：和,一般来说，如果你有一个响应请求的服务器，则你应该使用，如果你使用的是静态文件的服务器，则应该使用,这里我们就使用吧。

BrowserRouter as Router 的意思是 BrowserRouter 取名为 Router 只是换个名字的意思，具体代码看下图：

最后一步，只需要在index.js（注：不是src下的哟）引入，使用就完成了

npm start 运行看结果

完美运行。。。

关于路由动态传值： 路由传参的逻辑：设置规则--传递值--接受值--显示内容 首先你需要在标签内定义传递的规则：

定义了规则之后，如果再去访问我们的List会这样：

已经匹配不到了，需要在标签里面进行传值，这样：

可以看，在标签里面传入我们的定义的id值之后，成功匹配。

那么如何获取到我们传递的值呢？

如果你有一定的react基础，react的constructor里面有一个传入的值props,这里面就包含了我们传递的值，需要你了解生命周期，在componentDidMount里面获取：

没错，在一个match对象里面，里面就是我们的route对象

成功获取。

接下来我们做个稍微复杂点的demo，在index页面传递一个列表到List页面：

ps:这里需要注意的是，在标签里面拼接id时，需要使用{}包裹（react默认使用大括号包裹的就是js代码）

完成接收

路由重定向：

标签式重定向：在你需要重定向的页面引入Redirect

注意：必须在render函数 return 里面进行重定向：

前提是：你的router文件里面也已经引入了需要重定向的页面

编程式重定向：在上面也讲述了route对象是在哪里获取的，简单粗暴的在你需要重定向的页面里面的constrctor里面进行push操作就行了。

嵌套路由：（请新建一个demo02哟）

router文件代码

Index组件代码

挂载

效果 css代码：新建一个index.css：

右侧需要切换的页面代码：

ps：三个页面代码都是一样的 就不一一展示了，直接复制过去改下名字就行了

建好了三个文件后，开始编写我们的二级路由文件。（这三个是三级路由哟）

注意目录结构 不要弄错了哟

注意这三个箭头的地方

效果：点击视频教程 -> Flutter教程 出现的页面

新加css代码

效果

下面的职场技能就留着自己做练习吧，和视频教程一样的写法。。。效果：

关于React Router 更多的知识可以在https://react-router.docschina.org这里查看窝