Skip to content

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

· 4 min

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 路由总结#

组件#

Hooks#

补充内容#

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 组件，该组件表示匹配上的子路由组件渲染的位置。