React-router v6学生管理系统笔记

快速搭建服务器

我们使用的json-server

初始化 npm init -y 
下载json-server
配置启动命令："json:server":"json-server --watch db.json"
启动：npm run json:server

安装依赖

npm i react-router-dom //安装路由
npm i axios  

React-route 路由总结

组件

• BrowserRouter:整个路由以history模式开始，包裹跟组件

• HashRouter： 整个前端路由以hash模式开始，包裹跟组件

  在index.js中
  import {BrowserRouter,HashRouter} from 'react-router-dom'
  <HashRouter>
  <App />
  </HashRouter>

• Routes：主要是提供上下文环境

• Route：在Route组件中，书写对应的路由，以及路由对应的组件
  path：匹配的路由
  element：匹配该路由要渲染的组件

• Navigate：导航组件，类似于useNavigate的返回值函数

  import {Routes,Route，Navigate } from "react-router-dom"
  <Routes>
  <Route path="/home" element="<Home />"></Route>
  //重定向到home
  <Route path="/" element="<Navigate replace to="/home"></Navigate>"></Route>
  </Routes>

• NavLink:类似于Link，最终会被渲染成a标签，他和link区别是有一个active的激活样式，一般做导航栏的跳转

  import {NavLink} from "react-router-dom"
  //跳转到home
  <NavLink to="/home"></NavLink>

• Outlet：可以理解为 vue中的RouterView

hooks

• useLocation: 获取location对象，我们可以获取state属性，这往往是其他路由跳转过来，传递额外的数据

  navigate('/home',{
  state:{
  name:'张三'，
  type: 'delete'
  }
  })

  import {useLocation} from "react-router-dom"
  const location = useLocatioin()

• useNavigate： 会返回一个函数，通过该函数做跳转

  import {useNavigate} from "react-router-dom"
  const navigate = useNavigate()
  navigate('/home')

• useParams: 获取动态参数

  import {useParams} from "react-router-dom"
  const params= useParams()
  console.log("动态参数params："+params)

• useRoutes：通过函数hook形式定义

  import {useRoutes} from "react-router-dom"

  const routes = useRoutes([
  {
  path: '/home',
  element: <Home />
  },
  {
  path: '/about',
  element: <About/>
  children: [
  {
  path: 'tel',
  element: <Tel />
  }
  ]
  }
  ])
  return routes