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 文件(作为所有页面的对外导出的文件,存在的意义:方便管理)
    react-router-dom的基本使用_第1张图片
  3. Admin 、Article、Blog、BlogList、Login、NotFound 此六个文件夹下的 index.jsx 以及 index.js 文件代码如下
    react-router-dom的基本使用_第2张图片
    react-router-dom的基本使用_第3张图片
    react-router-dom的基本使用_第4张图片
    react-router-dom的基本使用_第5张图片
    react-router-dom的基本使用_第6张图片
    react-router-dom的基本使用_第7张图片
    react-router-dom的基本使用_第8张图片
    react-router-dom的基本使用_第9张图片
  4. routes 文件夹下的 admin.js 、 blog.js 、 index.js(此文件不是必须,只是本人为了方便调用观看而已),具体代码如下:
    react-router-dom的基本使用_第10张图片
    react-router-dom的基本使用_第11张图片
    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 方法下写下以下代码
    react-router-dom的基本使用_第12张图片

你可能感兴趣的:(react-router-dom的基本使用)