React项目路由实战

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>

路由入口

无论官网或者系统存在路由的一级或者二级入口

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

配置二级路由出口

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

一级路由组件中配置出口
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路由官方提供hook，可以将组件化配置转为详细的路由信息配置（非内置组件的配置方案）

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转化为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;
};

在该配置中配置一级路由子路由 children属性

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

在当前路由配置上添加登录认证。验证用户是否登录。

主要检测的是token值。

进入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 });