React-router v6 版本学生管理系统课堂笔记

快速搭建服务器

这里我们选择使用 json-server 来快速搭建一个服务器

npm 地址：https://www.npmjs.com/package/json-server

首先 npm init 初始化一个服务器的目录，然后安装 json-server 依赖，之后创建 db.json，该文件就是我们的数据文件

{
    "students": [
        {
            "name": "xiejie",
            "age": "18",
            "phone": "333-444-555",
            "email": "xiejie@gmail.com",
            "education": "adsfasfd",
            "graduationschool": "asdfasfd",
            "profession": "asdfasdf",
            "profile": "asdfasfdasdf",
            "id": 1
        },
        {
            "name": "yajing",
            "age": "34",
            "phone": "123-345-678",
            "email": "yajing@hotmail.com",
            "education": "fasdfasfd",
            "graduationschool": "fasfasdf",
            "profession": "sdfasdfafd",
            "profile": "asdfasdf",
            "id": 3
        },
        {
            "name": "xizhi",
            "age": 47,
            "phone": "13112341234",
            "email": "1234567@qq.com",
            "education": "硕士",
            "graduationschool": "北京大学",
            "profession": "前端开发工程师",
            "profile": "大家好!",
            "id": 2
        }
    ],
    "classes" : [
        {
            "id" : 1,
            "name" : "前端01班",
            "description" : "这是一个积极向上的班级"
        },
        {
            "id" : 2,
            "name" : "前端02班",
            "description" : "这也是一个非常积极向上的班级"
        }
    ]
}

之后在 package.json 中添加一条命令：

"json:server":"json-server --watch db.json"

最后就可以启动服务器了：

npm run json:server

快速搭建整个管理系统

因为目前还没有学习组件库，我们选择使用 Bootstrap

这里我们使用的模板地址：https://v3.bootcss.com/examples/starter-template/#

因为我们用了 bootstrap 相关的样式类，所以我们需要引入 Bootstrap，我们这里选择使用 CDN 的方式来引入

https://www.bootcdn.cn/twitter-bootstrap/

可以在 index.html 中添加如下的代码

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>

<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  crossorigin="anonymous"
></script>

React-router v6 路由总结

组件

BrowserRouter：整个前端路由以 history 模式开始，包裹根组件
HashRouter：整个前端路由以 hash 模式开始，包裹根组件
Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境
Route：在 Route 组件中书写你对应的路由，以及路由所对应的组件
- path：匹配的路由
- element：匹配上该路由时，要渲染的组件
Navigate：导航组件，类似于 useNavigate 的返回值函数，只不过这是一个组件
NavLink：类似于 Link，最终和 Link 一样，会被渲染为 a 标签，注意它和 Link 的区别，实际上就是当前链接，会有一个名为 active 的激活样式，所以一般用于做顶部或者左侧导航栏的跳转

Hooks

useLocation：获取到 location 对象，获取到 location 对象后，我们可以获取 state 属性，这往往是其他路由跳转过来的时候，会在 state 里面传递额外的数据
useNavigate：调用之后会返回一个函数，通过该函数可以做跳转。
useParams：获取动态参数

补充内容

useRoutes

使用示例如下：

function Router(props) {
    return useRoutes([
        {
            path: "/home",
            element: <Home />,
        },
        {
            path: "/about",
            element: <About />,
        },
        {
            path: "/add",
            element: <AddOrEdit />,
        },
        {
            path: "/detail/:id",
            element: <Detail />,
        },
        {
            path: "/edit/:id",
            element: <AddOrEdit />,
        },
        {
            path: "/",
            element: <Navigate replace to="/home" />
        }
    ]);
}

export default Router;

嵌套路由

直接在 useRoutes 进行 chilren 属性的配置即可，类似于 vue-router，children 对应的是一个数组，数组里面是一个一个路由对象

 {
   path: "/about",
     element: <About />,
     children : [
         {
           path : "email",
           element : <Email/>
         },
         {
           path : "tel",
           element : <Tel/>
         },
         {
           path : "",
           element: <Navigate replace to="email" />
         }
       ]
 },

之后，使用 Outlet 组件，该组件表示匹配上的子路由组件渲染的位置。

5.3 KiB Raw Blame History Unescape Escape