seo建站推广机构组织网站建设
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></>)}