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