Método de transferencia de valor de enrutamiento y carga diferida del componente de enrutamiento del proyecto React

Mobile 2023-04-10 01:42:17 views: null

proyecto de combate

Use useRoutes para configurar rutas y combine ranuras para configurar la detección de inicio de sesión de usuario.

  1. El usuario inicia sesión con éxito e ingresa a la interfaz principal del sistema de inicio de sesión directo

Extracción del módulo de enrutamiento

transferencia de código general

{
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;
}

Cómo pasar valor en ruta en React

  1. obtener valor de pase de ruta
  2. Valor de paso de enrutamiento dinámico
 
 
get路由传值：在路径后边序列化数据
/admin?id=10086&name=张三
动态路由传值：路由的严格匹配
1.在路由配置中进行配置
{
path:"/admin/:id"
}
2.路由入口上进行动态传值 /admin/10086
 
 
Use la misma ruta para pasar diferentes datos en el proyecto
 
 
 
 
 
 
Configurar enrutamiento de nivel 3
 
 
 
 
1.obtener fax de enrutamiento
 
 
 
 
{/* 三级入口 */}
<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 />
 
 
 
 
Vaya al componente de enrutamiento correspondiente para obtener el valor de pase de obtención de ruta para el análisis.
 
 
Use el gancho oficial para obtener el objeto de ubicación para analizar
 
 
 
 
 
 
import { useLocation } from "react-router-dom";

export default () => {
//使用useLocation
let location = useLocation();
console.log(location);
return <>三级路由组件</>;
};
 
 
 
 
Use el enlace oficial useSearchParams para analizar datos serializados
 
 
 
 
 
 
//使用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 la coincidencia dinámica para pasar valores en el proyecto
 
 
Configure los detalles de enrutamiento primero
 
 
 
 
 
 
     
  
  1. path: "list/:id",
    2.  
 
 
 
 
 
路由入口一致
{/* 三级入口 */}
<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 />
 
 
Obtener valor dinámico pasando en componentes de enrutamiento
 
 
 
 
ganchos oficiales
 
 
 
 
 
 
     
  
  1. useParams用来解析路由动态传值（键值对）
    2.  
  
  2. //该hook返回值为解析之后的对象
    3.  
 
 
 
 
 
import { useParams } from "react-router-dom";

export default () => {
//使用useParams解析动态
let params = useParams();
console.log(params);
return <>三级路由组件</>;
};
 
 
 
 
 
 
     
  
  1. key值和动态路由传参配置参数一致
    2.  
 
 
 
 
 
import { useEffect } from "react";
import { useParams } from "react-router-dom";

export default () => {
//使用useParams解析动态
let { depId } = useParams();
console.log("渲染");
useEffect(() => {
console.log("发送请求");
}, [depId]);
return <>三级路由组件-{depId}</>;
};
 
 
Los esquemas de transferencia de valor dinámico o get anteriores se completan con componentes de función que utilizan ganchos.
 
 
Si el componente de clase de prueba utilizado en el proyecto.
 
 
 
 
1.react-router-dom版本 如果版本是6之前
之前react-router-dom内置了一个HOC高阶组件 withRouter
import {withRouter} from 'react-router-dom'
6版本中没有withRouter高阶组件
 
 
Encapsule un withRouter HOC de alto nivel
 
 
utilizado en componentes de clase de clase
 
 
 
 
withRouter de alto nivel después de la encapsulación
 
 
 
 
//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}
/>
</>
);
};
};
 
 
Carga diferida asíncrona de componentes en reacción
 
 
 
 
//同步引入方案
//同步引入组件
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";

//为了提升加载的性能 可以更改为异步懒加载
 
 
La api oficial React.lazy() se utiliza principalmente para la carga diferida
 
 
 
 
El parámetro perezoso es ()=>promise——Lenovo es6import()
 
 
 
 
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(() => import(`../views/${path}.jsx`));
return <Module />;
}
 
 
 
 
     
  
  1. 修改配置
    2.  
  
  2. element: <Author name="admin">{lazyLoad("Index")}</Author>,
    3.  
 
 
 
El método de usar el componente de carga perezoso creado
 
 
 
 
//定义路由集合
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懒加载正常
 
 
Pero modifique las otras subrutas de varios niveles para analizar directamente la ruta e informar un error
 
 
 
 
children: [
{
path: "index",
element: lazyLoad("children/Index"), //子路由懒加载
},
{
path: "user",
element: <User />,
},
{
path: "",
element: <Navigate to="index" replace={true} />,
},
],
 
 
 
 
Use la solución de carga diferida proporcionada por la herramienta de compilación vite
 
 
 
 
     
  
  1. import.meta.glob() 懒加载文件
    2.  
 
 
 
 
 
//懒加载views下的文件
let Modules = import.meta.glob("../views/**/*.jsx");
console.log(Modules);
 
 
La salida son todos los archivos jsx en el directorio de vistas.
 
 
 
 
 
 
//修改懒加载方法
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return <Module />;
}
//现在这种用法可以把一些直接使用的路由全部懒加载
//用户点击的时候按需加载当前路由组件
//react中懒加载组件必须带一个组件出来（React中等待懒加载组件出来之后在替换）
 
 
 
 
Los avisos de error utilizan el componente integrado suspendido para controlar el estado del componente con carga diferida.
 
 
Método de carga diferida después del procesamiento
 
 
 
 
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return (
<React.Suspense fallback={<div>正在加载...</div>}>
<Module />
</React.Suspense>
);
}
 
 
 


                    

                        
Supongo que te gusta

                        

                            
                            
                        

                    

                    
Origin blog.csdn.net/m0_74331185/article/details/129823465

                    

                        
                    

                    

                

            

            


                

                    

                        
                        
                        
                        
                    

                    

                        

                            

                                Recomendado
                            

                            

                        

                    

                    

                        

                        
                        
                    

                


                

                    

                        

                            

                                Clasificación
                            

                            

                        

                    

                    

                        
                    

                

                

                    

                        

                            

                                Diario
                            

                            

                                Más
                            

                            

                        

                    

                    

                        

                            2024-05-19(0)
                        

                        

                            2024-05-18(30)
                        

                        

                            2024-05-17(4)
                        

                        

                            2024-05-16(22)
                        

                        

                            2024-05-15(5)
                        

                        

                            2024-05-14(10)
                        

                        

                            2024-05-13(7)
                        

                        

                            2024-05-12(22)
                        

                        

                            2024-05-11(31)
                        

                        

                            2024-05-10(32)
                        

                    

                


            


            
        

    





    

        

            
Code World

            
© 2018 codetd.com