React project routing practice

Chinese documentation for routing in react

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

Install:

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

configure routing

Configure a specific routing table

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

Match/route jump to other routes

<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>

routing entry

Regardless of whether the official website or the system has a first-level or second-level entry for routing

{/* 配置路由的入口 */}
<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>

Project configuration secondary routing

Use the slot of the Route built-in component to configure the secondary sub-routes

{/* /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>

Configure the secondary routing egress

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

一级路由组件中配置出口
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 The kook can also be used as a routing outlet

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

Configure the secondary routing egress and ingress

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

useRoutes configuration

React routing officially provides hooks, which can convert component configuration into detailed routing information configuration (configuration scheme for non-built-in components)

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

Directly modify the configuration scheme of built-in components to convert useRoutes to routes

//引入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;
};

Configure the first-level routing sub-routing children attribute in this configuration

//引入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;
};

Add login authentication on the current routing configuration. Verify that the user is logged in.

The main detection is the token value.

进入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>
),

Jump to the routing interface after successful login

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

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

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