Project combat
Use useRoutes to configure routes, and combine slots to configure user login detection.
- The user logs in successfully and enters the login direct system main interface
Routing module extraction
overall code transfer
{
path: "/admin",
element: (
<Author name="admin">
<Index />
</Author>
),
},
{
path: "/login",
element: (
<Author name="login">
<Login />
</Author>
),
},
//修改author登录鉴权 代码
//验证用户登录--插槽
function Author({ name, children }) {
//token获取
let token = localStorage.getItem("_token");
if (name == "admin")
return token ? children : <Navigate to="/login" replace={true} />;
else return token ? <Navigate to="/" /> : children;
}How to pass value in route in React
- get route pass value
- Dynamic routing pass value
get路由传值：在路径后边序列化数据
/admin?id=10086&name=张三
动态路由传值：路由的严格匹配
1.在路由配置中进行配置
{
path:"/admin/:id"
}
2.路由入口上进行动态传值 /admin/10086Use the same route to pass different data in the project
Configure Level 3 Routing
1.get routing fax
{/* 三级入口 */}
<NavLink to="/admin/user/list?depId=105">测试部门</NavLink> <br />
<NavLink to="/admin/user/list?depId=106">财务部门</NavLink> <br />
<NavLink to="/admin/user/list?depId=108">安保部门</NavLink> <br />
<NavLink to="/admin/user/list?depId=107">工程部门</NavLink> <br />
Go to the corresponding routing component to obtain the route get pass value for analysis.
Use the official hook to get the location object for parsing
import { useLocation } from "react-router-dom";
export default () => {
//使用useLocation
let location = useLocation();
console.log(location);
return <>三级路由组件</>;
};
Use the official hook useSearchParams to parse serialized data
//使用useSearchParams
let [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams);
export default () => {
//使用useLocation
let location = useLocation();
//使用useSearchParams
let [searchParams, setSearchParams] = useSearchParams(location.search);
console.log(searchParams.get("depId"));
console.log(searchParams.has("depId"));
return <>三级路由组件</>;
};
import { useEffect } from "react";
import { useLocation, useSearchParams } from "react-router-dom";
export default () => {
//使用useLocation
let location = useLocation();
//使用useSearchParams
let [searchParams, setSearchParams] = useSearchParams(location.search);
//获取get值
let depId = searchParams.get("depId") || 105;
useEffect(() => {
console.log("发送请求");
}, [depId]);
return <>三级路由组件-{depId}</>;
};Use dynamic matching to pass values in the project
Configure routing details first
path: "list/:id",
路由入口一致
{/* 三级入口 */}
<NavLink to="/admin/user/list/105">测试部门</NavLink> <br />
<NavLink to="/admin/user/list/106">财务部门</NavLink> <br />
<NavLink to="/admin/user/list/108">安保部门</NavLink> <br />
<NavLink to="/admin/user/list/107">工程部门</NavLink> <br />Get dynamic value passing in routing components
official hooks
useParams用来解析路由动态传值（键值对）//该hook返回值为解析之后的对象
import { useParams } from "react-router-dom";
export default () => {
//使用useParams解析动态
let params = useParams();
console.log(params);
return <>三级路由组件</>;
};
key值和动态路由传参配置参数一致
import { useEffect } from "react";
import { useParams } from "react-router-dom";
export default () => {
//使用useParams解析动态
let { depId } = useParams();
console.log("渲染");
useEffect(() => {
console.log("发送请求");
}, [depId]);
return <>三级路由组件-{depId}</>;
};The above get or dynamic value transfer schemes are all completed by function components using hooks.
If the test class component used in the project.
1.react-router-dom版本 如果版本是6之前
之前react-router-dom内置了一个HOC高阶组件 withRouter
import {withRouter} from 'react-router-dom'
6版本中没有withRouter高阶组件Encapsulate a withRouter HOC high-level
used in class class components
High-level withRouter after encapsulation
//withRouter 路由高阶组件
import {
useLocation,
useNavigate,
useParams,
useSearchParams,
} from "react-router-dom";
export default (WrapComponent) => {
return (props) => {
//解析动态路由传值
let params = useParams();
//获取location
let location = useLocation();
//解析路由get传值
let [serchParams, setsearchParams] = useSearchParams(location.search);
//编程导航
let navigate = useNavigate();
return (
<>
<WrapComponent
{...props}
params={params}
location={location}
query={serchParams}
navigate={navigate}
/>
</>
);
};
};Asynchronous lazy loading of components in react
//同步引入方案
//同步引入组件
import Index from "../views/Index";
import Login from "../views/Login";
import NotFound from "../views/Not-found";
import Indexs from "../views/children/Index";
import User from "../views/children/User";
//为了提升加载的性能 可以更改为异步懒加载The official api React.lazy() is mainly used for lazy loading
The lazy parameter is ()=>promise——Lenovo es6import()
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(() => import(`../views/${path}.jsx`));
return <Module />;
}修改配置element: <Author name="admin">{lazyLoad("Index")}</Author>,
The method of using the created lazy lazy loading component
//定义路由集合
let Routes = [
{
path: "/",
element: <Navigate to="/admin" replace={true} />,
},
{
path: "/admin",
element: <Author name="admin">{lazyLoad("Index")}</Author>,
children: [
{
path: "index",
element: <Indexs />,
},
{
path: "user",
element: <User />,
},
{
path: "",
element: <Navigate to="index" replace={true} />,
},
],
},
{
path: "/login",
element: <Author name="login">{lazyLoad("Login")}</Author>,
},
{
path: "/not-found",
element: lazyLoad("Not-found"),
},
{
path: "*",
element: <Navigate to="/not-found" />,
},
];
//一级路由直接修改lazy懒加载正常But modify the multi-level other sub-routes to directly analyze the route and report an error
children: [
{
path: "index",
element: lazyLoad("children/Index"), //子路由懒加载
},
{
path: "user",
element: <User />,
},
{
path: "",
element: <Navigate to="index" replace={true} />,
},
],
Use the lazy loading solution provided by the vite build tool
import.meta.glob() 懒加载文件
//懒加载views下的文件
let Modules = import.meta.glob("../views/**/*.jsx");
console.log(Modules);The output is all jsx files in the views directory
//修改懒加载方法
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return <Module />;
}
//现在这种用法可以把一些直接使用的路由全部懒加载
//用户点击的时候按需加载当前路由组件
//react中懒加载组件必须带一个组件出来（React中等待懒加载组件出来之后在替换）
The error prompts use the suspended built-in component to handle the state of the lazy loaded component.
Lazy loading method after processing
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return (
<React.Suspense fallback={<div>正在加载...</div>}>
<Module />
</React.Suspense>
);
}