React プロジェクトのルーティングの練習

反応中のルーティングに関する中国語のドキュメント

http://www.reactrouter.cn/docs/api#routes-%E5%92%8C-route

インストール:

cnpm i --save-dev react-router-dom

ルーティングを構成する

特定のルーティング テーブルを構成する

 
 
<Router>
{/* 配置路由表 */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/not-found" element={<NotFound />}></Route>
</Routes>
</Router>

他のルートへのマッチ/ルートジャンプ

 
 
<Router>
{/* 配置路由表 */}
<Routes>
<Route path="/admin" element={<Admin />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/not-found" element={<NotFound />}></Route>
{/* 匹配/ 跳转其他路由 */}
<Route
path="/"
element={<Navigate to="/admin" replace={true} />}
></Route>
</Routes>
</Router>

ルーティング エントリ

公式 Web サイトまたはシステムにルーティング用の第 1 レベルまたは第 2 レベルのエントリがあるかどうかに関係なく

 
 
{/* 配置路由的入口 */}
<div>
<Link to="/">系统主页</Link>
<Link to="/login">登录界面</Link>
</div>

 
 
<NavLink
to="/"
style={({ isActive }) => {
//isActive 激活状态
console.log(isActive);
return isActive ? { color: "red" } : null;
}}
className={({ isActive }) => {
return isActive ? "active" : null;
}}
>
系统admin
</NavLink>
<NavLink to="/login">系统login</NavLink>

プロジェクト構成の二次ルーティング

Route 組み込みコンポーネントのスロットを使用して、セカンダリ サブルートを構成します。

 
 
{/* /admin/echarts-list */}
<Route path="/admin" element={<Admin />}>
{/* 配置子路由 */}
<Route path="/echarts-list" element={<EchartsList />}></Route>
</Route>

 
 
错误提示子路由不写绝对路径 可以不写/
<Route path="/admin" element={<Admin />}>
{/* 配置子路由 */}
<Route path="echarts-list" element={<EchartsList />}></Route>
</Route>

セカンダリ ルーティングの出口を構成する

 
 
  1. 备注:二级路由出口需要在一级路由组件中配置

 
 
一级路由组件中配置出口
import { Outlet } from "react-router-dom";

export default () => {
return (
<>
<div>
Admin
{/* 二级路由出口 */}
<div>
<Outlet />
</div>
</div>
</>
);
};

//子路由的配置
{/* /admin/echarts-list */}
<Route path="/admin" element={<Admin />}>
{/* 配置子路由 */}
<Route path="echarts-list" element={<EchartsList />}></Route>
<Route path="user" element={<User />}></Route>
<Route path="" element={<Navigate to="echarts-list" />}></Route>
</Route>

useOutlet kook はルーティング アウトレットとしても使用できます

 
 
useOutlet 获取到的是当前路由层级的子路由虚拟dom

let Ele = useOutlet();
console.log(Ele);

 
 
import { Outlet, useOutlet } from "react-router-dom";

export default () => {
let Ele = useOutlet();
console.log(Ele);
return (
<>
<div>
Admin
{/* 二级路由出口 */}
<div>{Ele}</div>
</div>
</>
);
};

セカンダリ ルーティングの送信と受信を構成する

 
 
<div>
Admin
<div>
<Link to="/admin/echarts-list">报表</Link>
<Link to="/admin/user">用户</Link>
</div>
{/* 二级路由出口 */}
<div>{Ele}</div>
</div>

useRoutes 構成

React ルーティングは正式にフックを提供します。これにより、コンポーネント構成を詳細なルーティング情報構成 (非組み込みコンポーネントの構成スキーム) に変換できます。

 
 
main.js调整路由代码

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
//引入web浏览器端路由
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

組み込みコンポーネントの構成スキームを直接変更して、useRoutes をルートに変換します

 
 
//引入useRoutes hook
import { Navigate, useRoutes } from "react-router-dom";
import Admin from "./views/Admin/Index";
import Login from "./views/Login";
import NotFound from "./views/Not-found";

//定义路由的配置
let routes = [
{
path: "/admin",
element: <Admin />,
},
{
path: "/login",
element: <Login />,
},
{
path: "/not-found",
element: <NotFound />,
},
{
path: "/",
element: <Navigate to="/admin" />,
},
{
path: "*",
element: <Navigate to="/not-found" />,
},
];

export default () => {
//使用useRoutes
let element = useRoutes(routes);//等价<Routes></Routes>
return element;
};

この構成で第 1 レベルのルーティング サブルーティングの子属性を構成します

 
 
//引入useRoutes hook
import { Navigate, useRoutes } from "react-router-dom";
import Admin from "./views/Admin/Index";
import Login from "./views/Login";
import NotFound from "./views/Not-found";

import EchartsList from "./views/Admin/children/EchartsList";
import User from "./views/Admin/children/User";
//定义路由的配置
let routes = [
{
path: "/admin",
element: <Admin />,
children: [
{
path: "echart-list",
element: <EchartsList />,
},
{
path: "user",
element: <User />,
},
{
path: "",
element: <Navigate to="echart-list" />,
},
],
},
{
path: "/login",
element: <Login />,
},
{
path: "/not-found",
element: <NotFound />,
},
{
path: "/",
element: <Navigate to="/admin" />,
},
{
path: "*",
element: <Navigate to="/not-found" />,
},
];

export default () => {
//使用useRoutes
let element = useRoutes(routes);
return element;
};

現在のルーティング構成にログイン認証を追加します。ユーザーがログインしていることを確認します。

主な検出はトークン値です。

 
 
进入admin路由组件需要认证。
使用react里面插槽语法做用户登录认证。


//校验用户登录的组件
function Auithorzation({ children }) {
//检测用户是否登录
//获取token
let token = localStorage.getItem("_token");
return token ? children : <Navigate to="/login" />;
}

//定义路由的配置
let routes = [
{
path: "/admin",
element: (
<Auithorzation>
<Admin />
</Auithorzation>
),

ログインに成功したら、ルーティング インターフェイスにジャンプします

 
 
export default () => {
let userLogin = () => {
localStorage.setItem("_token","abc");
//登录成功之后 设置缓存 使用代码进行路由跳转

};
return (
<>
Login
<button onClick={userLogin}>登录</button>
</>
);
};

 
 
//登录成功之后 设置缓存 使用代码进行路由跳转
//第一个参数:路由路径
navigate("/admin", { replace: true });

おすすめ

転載: blog.csdn.net/m0_74331185/article/details/129807354