react-router-dom的基本使用
最有效的了解 react-router-dom 的方式就是看文档,话不多说。上连接:https://reacttraining.com/react-router/web/guides/quick-start
,虽然都是英语但是有谷歌翻译,阻挡不了我们学习的 jio 步。
- 第一步当然是安装
yarn add react-router-dom
或者npm install react-router-dom
进行安装 - 先设计好自己的路由和对应页面,在项目目录中的 src 文件下新建两个文件夹,分别是 routes (存放路径文件)和 views(存放页面),以本人为例:routes 文件下新建了 admin.js 、 blog.js 文件以及 index.js
views 文件下新建 Admin 、Article、Blog、BlogList、Login、NotFound 这六个文件夹下各自新建 index.jsx 文件 以及 views 文件夹下再新建一个 index.js 文件(作为所有页面的对外导出的文件,存在的意义:方便管理)
- Admin 、Article、Blog、BlogList、Login、NotFound 此六个文件夹下的 index.jsx 以及 index.js 文件代码如下
- routes 文件夹下的 admin.js 、 blog.js 、 index.js(此文件不是必须,只是本人为了方便调用观看而已),具体代码如下:
- 进入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(一般放在所有路由末尾) - 在 index.js 导入 routes 文件中的 路由对象数组
- 在 index.js 中的 render 方法下写下以下代码