5.7 react 路由

react 状态管理库 14:20

• react 路由（补充） 数据路由

• 路由hooks

  • 路由跳转 （方法 标签/内置方法）

  • 获取路由地址栏信息

  • 动态路由实现（多角色权限路由）

• redux redux-toolkit 状态管理

• antd 组件使用

1.react 路由 声明式路由

v7: 数据式路由【推荐】 声明式路由

v6: 约定式路由【推荐】 配置式路由

main.js

  import { createRoot } from 'react-dom/client'import './index.css'import App from './App'import { BrowserRouter, Routes, Route } from "react-router";import Home from '@/pages/home/Home'import Coding from '@/pages/coding/Coding'import Pins from '@/pages/pins/Pins'import Course from '@/pages/course/Course'​import Following from '@/pages/following/Following'import Frontend from "@/pages/frontend/Frontend";​createRoot(document.getElementById('root')).render(<BrowserRouter><Routes><Route path="/" element={<App />}><Route   element={<Home/>}><Route index element={<Following/>}></Route><Route path="frontend" element={<Frontend/>}></Route></Route>                </Route></Routes></BrowserRouter>)

2.路由hooks

2.1 跳转页面

• 通过组件跳转 原理 重新封装了a 标签

    <NavLink to="跳转路径" >Home</NavLink>

• 函数式编程 跳转 hooks 跳转

  import { useNavigate } from "react-router";​​let navigate = useNavigate();​navigate(数字)  //前进几页  后退几页navigate('/goods')   //直接跟路径

2.2 获取路由地址栏信息

  import { useLocation } from 'react-router'​let location = useLocation()   //{path:'/xxx',hash:'/#/xxx'}​​

3.外卖管理系统 -项目搭建

• 技术栈

vite

react19

react-router v7

less [新知识点：模块化css]

axios || Fetch [新知识点：fetch代替axios]

antd [新知识点]

antd charts [新：图表插件]

• 路由配置

1.创建所有的页面

2.创建路由配置文件 src/router/index.jsx

注意 layout 页面需要反复多次使用

  import { createBrowserRouter } from "react-router";​import App from '@/App'import Login from '@/pages/login/Login'import Layout from '@/pages/layout/Layout'import Home from '@/pages/home/Home'import AccountList from '@/pages/account/List'import AccountEdit from '@/pages/account/Edit'import AccountAdd from '@/pages/account/Add'import AccountCenter from '@/pages/account/Center'import Order from "@/pages/order/Order";const router = createBrowserRouter([{path: "/",Component:App,children:[{index:true,Component:Login},{path:"home",Component:Layout,children:[{index:true,Component:Home},]},{path:'account',Component:Layout,children:[{path:'list',Component:AccountList},{path:'add',Component:AccountAdd},{path:'center',Component:AccountCenter},{path:'edit',Component:AccountEdit}]},{path:'order',Component:Layout,children:[{index:true,Component:Order}]}]},​​​])​​export default router

3.修改main.jsx 的配置

全局注入 路由配置

  ​import { createRoot } from 'react-dom/client'import './index.css'import {RouterProvider} from 'react-router'import router from '@/router'​createRoot(document.getElementById('root')).render(<RouterProvider router={router}></RouterProvider>)​

4.根页面和 一级页面需要进行占位

• app.jsx

  import React from 'react'import { Outlet } from 'react-router'export default function App() {return (<><Outlet /></>)}​

• layout.jsx

  import React from 'react'import { Outlet } from 'react-router'export default function Layout() {return (<><div>顶部</div><div>左侧菜单</div><div><Outlet></Outlet></div></>)}​

4.antd 使用

• 下载安装

  pnpm install antd

• 使用

  import React from 'react'import { Button , Form, Input } from 'antd';import './index.less'export default function Login() {​const onFinish = values => {console.log('Success:', values);};​​return (<><div className="login"><div className="form-box">​<FormonFinish={onFinish}>​<Form.Itemlabel="账号"name="account"rules={[{ required: true, message: '请输入您的账号' }]}><Input /></Form.Item>​<Form.Itemlabel="密码"name="password"rules={[{ required: true, message: '请输入密码' }]}><Input.Password /></Form.Item>​<Form.Item label={null}><Button type="primary" htmlType="submit">登录</Button></Form.Item>​​​</Form>​​</div></div></>)}​