react-router-dom的基本使用

react-router-dom的基本使用

最有效的了解 react-router-dom 的方式就是看文档，话不多说。上连接：https://reacttraining.com/react-router/web/guides/quick-start ，虽然都是英语但是有谷歌翻译，阻挡不了我们学习的 jio 步。

1. 第一步当然是安装 yarn add react-router-dom 或者 npm install react-router-dom 进行安装
2. 先设计好自己的路由和对应页面，在项目目录中的 src 文件下新建两个文件夹，分别是 routes （存放路径文件）和 views（存放页面），以本人为例：routes 文件下新建了 admin.js 、 blog.js 文件以及 index.js
   
   views 文件下新建 Admin 、Article、Blog、BlogList、Login、NotFound 这六个文件夹下各自新建 index.jsx 文件 以及 views 文件夹下再新建一个 index.js 文件（作为所有页面的对外导出的文件，存在的意义：方便管理）
   
3. Admin 、Article、Blog、BlogList、Login、NotFound 此六个文件夹下的 index.jsx 以及 index.js 文件代码如下
   
   
   
   
   
   
   
   
4. routes 文件夹下的 admin.js 、 blog.js 、 index.js（此文件不是必须，只是本人为了方便调用观看而已），具体代码如下:
   
   
   
5. 进入src 文件夹下的 index.js 文件内，在头部添加 import { HashRouter as Router, Switch, Route, Redirect } from "react-router-dom";
   其中的 HashRouter as Router 的意思是将从 react-router-dom 中导出的 HashRouter 重命名为 Router， react-router-dom 中还有另一个叫 BrowserRouter ，其二者的区别在于使用 HashRouter 开启项目，路径为 http://localhost:3000/#/ ，而 BrowserRouter 则是 http://localhost:3000/
   Switch 则是只渲染第一个匹配到的路由对应的组件
   Route 他的作用便是 path 和 component 相匹配，渲染
   Redirect 会导航到指定的新 path, 新的 path 会覆盖历史记录堆栈中的 path（一般放在所有路由末尾）
6. 在 index.js 导入 routes 文件中的 路由对象数组
   
7. 在 index.js 中的 render 方法下写下以下代码