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'

     
 

• Routes：主要是提供上下文环境
• Route：在Route组件中，书写对应的路由，以及路由对应的组件
  path：匹配的路由
  element：匹配该路由要渲染的组件
• Navigate：导航组件，类似于useNavigate的返回值函数

import {Routes,Route，Navigate } from "react-router-dom"

	
	//重定向到home
	">

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

import {NavLink} from "react-router-dom"
//跳转到home

• 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: 
   },
   {
   	path: '/about',
   	element: 
   	children: [
   		{
   			path: 'tel',
   			element: 
   		}
   	]
   }
])
return routes