一、认识ReactRouter
一个路径path对应一个组件component，当我们在浏览器中访问一个path，对应的组件会在页面进行渲染
创建路由项目
// 创建项目npx create router-demo// 安装路由依赖包npm i react-router-dom// 启动项目npm run start简单的路由小案例
import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import { createBrowserRouter, RouterProvider } from 'react-router-dom'const router = createBrowserRouter([{// http://localhost:3000/loginpath:'/login',element:登录},{// // http://localhost:3000/articlepath:'/article',element:文章}])const root = ReactDOM.createRoot(document.getElementById('root'));root.render();正式创建路由
1. 新建src/page
page下面新建每个路由对应的文件夹
Article/index.js
const Article = () => {return 我是文章页}export default ArticleLogin/index.js
const Login = () => {return 我是登录页}export default Login2. 然后创建src/router/index.js 路由配置文件
import Login from "../page/Login";import Article from "../page/Article";import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{path:'/login',element:},{path: '/article',element:}])export default router3. 最后在src/index.js中注册
import React from 'react';import ReactDOM from 'react-dom/client';import router from "./router"import {RouterProvider } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'));root.render();二、路由导航
什么是路由导航
路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信
声明式导航与编程式导航
声明式导航
指通过组件描述要跳转到哪里，比如后台管理系统的左侧菜单。
Link被解析成a链接，传参通过字符串拼接实现。
文章编程式导航
通过useNavigate钩子得到导航方法，然后通过调用方法以命令式的方式进行路由跳转，比如登录请求完毕之后跳转就可以选择这种方式。
个人总结就是，声明式导航是html标签形式，编程式导航是js函数形式。
import { Link, useNavigate } from "react-router-dom"const Login = () => {const navigate = useNavigate()return (我是登录页{/* 声明式导航 */}go article{/* 编程式导航 */})}export default Loginvue小链接：
声明式导航
编程式导航 this.$router.push(‘/article’) （vue2）
const router = useRouter()
router.push(‘/article’) （vue3）
导航传参
searchParams传参
跳转页（发送参数）
navigate('/article" />// 别忘了 useSearchParams要导入const [params] = useSearchParams()const id = params.get('id')const name = params.get('name')params传参
跳转页（发送参数）
navigate('/article/1001/name')目标页（接收参数）
//别忘了 useParams要导入const params = useParams()const id = params.idconst name = params.namerouter/index.js
{ path: '/article/:id/:name', element:}三、嵌套路由
嵌套路由配置
1. 使用children属性配置路由嵌套关系
2. 使用组件配置二级路由渲染位置
定义一级路由Layout，二级路由About、Board
// Layout/index.jsimport { Link, Outlet } from "react-router-dom"const Layout = () => {return ( 我是一级路由Layout 面板
关于{/* 二级路由出口 */})}export default Layout// About/index.jsconst About = () => {return ( 我是二级路由About )}export default About// Board/index.jsconst Board = () => {return ( 我是二级路由Board )}export default Board路由配置文件
{path:'/',element: ,children:[{path:'board',element: },{path:'about',element:}]},默认二级路由
{path:'/',element: ,children:[{// path:'board',index: true,element: },{path:'about',element:}]},四、404路由配置
场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
1. 准备一个NotFound组件 2. 在路由表数组的末尾，以*号作为路由path配置路由
新增组件NotFound/index.js
const NotFound = () => {return (404 Not Found
)}export default NotFound路由配置
{ path:'*', element:}五、两种路由模式
createBrowserRouter — history模式
createHashRouter — hash模式
附-项目技术点
配置src别名路径@
路径解析配置
路径解析配置（webpack），把 @/ 解析为 src/
1. 安装craco npm i -D @craco/craco 2. 项目根目录下创建配置文件 craco.config.js 3. 配置文件中添加路径解析配置 4. 包文件中配置启动和打包命令
安装包
新增根目录下配置文件craco.config.js
const path = require('path')module.exports = {webpack:{alias:{'@':path.resolve(__dirname, 'src')}}}更改package.json
"scripts": {"start": "craco start","build": "craco build","test": "react-scripts test","eject": "react-scripts eject"},路径联想配置
路径联想配置（VsCode），VsCode 在输入 @/ 时，自动联想出来对应的 src/下的子级目录
1. 根目录下新增配置文件 – jsconfig.json 2. 添加路径提示配置
jsconfig.json
{"compilerOptions":{"baseUrl": "./","paths":{"@/*":["src/*"]}}}数据Mock
在前后端分类的开发模式下，前端可以在没有实际后端接口的支持下先进行接口数据的模拟，进行正常的业务功能开发
json-server实现数据Mock
json-server是一个node包，可以在不到 30 秒内获得零编码的完整的Mock服务
1. 项目中安装json-server npm i -D json-server 2. 准备一个json文件 3. 添加启动命令 4. 访问接口进行测试
安装完毕之后在项目根目录新建server/data.json并放入数据内容
然后在package.json下scripts里新增一条
"server": "json-server ./server/data.json --port 8888"执行 npm run server，有如下结果即启动成功
