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

组件

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