React プロジェクト ルーティング コンポーネントの遅延読み込みとルーティング値の転送方法

プロジェクト戦闘

useRoutes を使用してルートを構成し、スロットを組み合わせてユーザー ログイン検出を構成します。

1. ユーザーは正常にログインし、ログイン ダイレクト システムのメイン インターフェイスに入ります。

ルーティング モジュールの抽出

全体的なコード転送

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

Reactでルートに値を渡す方法

1. ルートパスの値を取得する
2. 動的ルーティング パスの値

get路由传值：在路径后边序列化数据
/admin?id=10086&name=张三
动态路由传值：路由的严格匹配
1.在路由配置中进行配置
{
path:"/admin/:id"
}
2.路由入口上进行动态传值 /admin/10086

プロジェクト内の異なるデータを渡すために同じルートを使用する

レベル 3 ルーティングの構成

1.ルーティング 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 />

対応するルーティング コンポーネントに移動して、分析用のルート ゲット パス値を取得します。

公式のフックを使用して、解析用の場所オブジェクトを取得します

import { useLocation } from "react-router-dom";

export default () => {
//使用useLocation
let location = useLocation();
console.log(location);
return <>三级路由组件</>;
};

公式フック useSearchParams を使用して、シリアル化されたデータを解析します

//使用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}</>;
};

動的マッチングを使用してプロジェクトに値を渡す

最初にルーティングの詳細を構成する

1. 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 />

ルーティング コンポーネントで動的な値を渡す

公式フック

1. useParams用来解析路由动态传值（键值对）
2. //该hook返回值为解析之后的对象

import { useParams } from "react-router-dom";

export default () => {
//使用useParams解析动态
let params = useParams();
console.log(params);
return <>三级路由组件</>;
};

1. 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}</>;
};

上記の get または動的な値の転送スキームはすべて、フックを使用する関数コンポーネントによって完了します。

プロジェクトで使用されるテスト クラス コンポーネントの場合。

1.react-router-dom版本 如果版本是6之前
之前react-router-dom内置了一个HOC高阶组件 withRouter
import {withRouter} from 'react-router-dom'
6版本中没有withRouter高阶组件

withRouter HOC の高レベルをカプセル化する

クラス クラス コンポーネントで使用

カプセル化後の withRouter の概要

//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}
/>
</>
);
};
};

反応中のコンポーネントの非同期遅延読み込み

//同步引入方案
//同步引入组件
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";

//为了提升加载的性能 可以更改为异步懒加载

公式 API React.lazy() は主に遅延読み込みに使用されます

遅延パラメータは ()=>promise—Lenovo es6import() です。

//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(() => import(`../views/${path}.jsx`));
return <Module />;
}

1. 修改配置
2. element: <Author name="admin">{lazyLoad("Index")}</Author>,

作成した遅延遅延ローディングコンポーネントの使用方法

//定义路由集合
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懒加载正常

ただし、マルチレベルの他のサブルートを変更して、ルートを直接分析し、エラーを報告します

children: [
{
path: "index",
element: lazyLoad("children/Index"), //子路由懒加载
},
{
path: "user",
element: <User />,
},
{
path: "",
element: <Navigate to="index" replace={true} />,
},
],

vite ビルド ツールが提供する遅延読み込みソリューションを使用する

1. import.meta.glob() 懒加载文件

//懒加载views下的文件
let Modules = import.meta.glob("../views/**/*.jsx");
console.log(Modules);

出力は、ビュー ディレクトリ内のすべての jsx ファイルです。

//修改懒加载方法
//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return <Module />;
}
//现在这种用法可以把一些直接使用的路由全部懒加载
//用户点击的时候按需加载当前路由组件
//react中懒加载组件必须带一个组件出来（React中等待懒加载组件出来之后在替换）

エラー プロンプトは、中断された組み込みコンポーネントを使用して、遅延読み込みされたコンポーネントの状態を処理します。

処理後の遅延読み込み方式

//懒加载组件
function lazyLoad(path) {
//懒加载
let Module = React.lazy(Modules[`../views/${path}.jsx`]);
return (
<React.Suspense fallback={<div>正在加载...</div>}>
<Module />
</React.Suspense>
);
}