react router v6总结

本文主要是介绍react router v6总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、使用createBrowserRouter()创建路由：

1、src/router/index.js：

import { createBrowserRouter } from "react-router-dom";
import ErrorPage from "@/pages/404/";const router = createBrowserRouter([{path: "/",errorElement: <ErrorPage />,async lazy() {const { default: App } = await import("../App.js");return { Component: App };},children: [{errorElement: <ErrorPage />,children: [{index: true,async lazy() {const { default: Home } = await import("../pages/home/");return { Component: Home };},},{path: "collapse",async lazy() {const { default: Collapse } = await import("../pages/collapse/");return { Component: Collapse };},},{path: "timeline",async lazy() {const { default: Timeline } = await import("../pages/timeline/");return { Component: Timeline };},},],},],},{path: "/admin",async lazy() {const { default: Admin } = await import("../pages/admin/");return { Component: Admin };},},
]);export default router;

注意其中的index: true

{index: true,async lazy() {const { default: Home } = await import("../pages/home/");return { Component: Home };},}

2、src/index.js：

import React from "react";
import ReactDOM from "react-dom/client";
import "@/index.css";
import { RouterProvider } from "react-router-dom";
import router from "@/router";
import reportWebVitals from "@/reportWebVitals";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(// <React.StrictMode>//   <App />//   {/* <Admin/> */}// </React.StrictMode><RouterProvider router={router} />
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

注意其中的：

<RouterProvider router={router} />

3、src/App.js：

import React from "react";
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import "@/App.css";
import SiderMenu from "@/components/sider-menu/";
import { observer } from "mobx-react";
import mobxData from "@/store/MobxData";
import { Outlet } from "react-router-dom";const { Header, Content, Sider } = Layout;const App = () => {return (<Layout className="app-wrapper"><Header className="app-header"><div className="app-logo"><img height="36" src={require("./logo.png")} /></div><Dropdown /></Header><Layout className="app-wrapper-in"><Sider width={mobxData.width} className="app-sider"><SiderMenu /></Sider><Layoutstyle={{padding: "0 24px 0",background: "#e9e9ed",}}><Content className="app-content"><Outlet /></Content></Layout></Layout></Layout>);
};export default observer(App);

注意其中的：

<Outlet />

 4、src/sider-menu/index.js：

import React, { useState } from "react";
import {HomeOutlined,FolderOutlined,AppstoreOutlined,ReadOutlined,TableOutlined,ProductOutlined,MenuFoldOutlined,MenuUnfoldOutlined,
} from "@ant-design/icons";
import "./index.css";
import mobxData from "@/store/MobxData";
import { NavLink } from "react-router-dom";const App = () => {const [status, setStatus] = useState(false);const onclick = () => {setStatus(!status);if (status) {mobxData.changeWidth(30);} else {mobxData.changeWidth(-30);}const elements = document.querySelectorAll(".menu-item dd");for (let i = 0; i < elements.length; i++) {if (status) {elements[i].style.display = "block";} else {elements[i].style.display = "none";}}};return (<div className="menu"><NavLink to="/"><dl className="menu-item"><dt><HomeOutlined /></dt><dd>我的门户</dd></dl></NavLink><NavLink to="/timeline"><dl className="menu-item"><dt><FolderOutlined /></dt><dd>文档中心</dd></dl></NavLink><NavLink to="/collapse"><dl className="menu-item"><dt><AppstoreOutlined /></dt><dd>工作中心</dd></dl></NavLink><dl className="menu-item"><dt><ReadOutlined /></dt><dd>知识中心</dd></dl><dl className="menu-item"><dt><TableOutlined /></dt><dd>表格中心</dd></dl><dl className="menu-item"><dt><ProductOutlined /></dt><dd>应用</dd></dl><div className="collapse">{status ? (<MenuUnfoldOutlined onClick={onclick} />) : (<MenuFoldOutlined onClick={onclick} />)}</div></div>);
};export default App;

注意其中的NavLink及css中添加的active属性

5、路由鉴权：src/components/auth/index.js

import React, { useEffect } from "react";
// import { useNavigate } from "react-router-dom";
import { Navigate } from "react-router-dom";export default function Auth({ children }) {//判断token是否存在localStorage.setItem("token", "1");const isAuth = localStorage.getItem("token");console.log("isAuth");console.log(isAuth);if (isAuth && Number(isAuth) !== 1) {return <>{children}</>;} else {console.log("没有token请重新登录");console.log(<Navigate to="/admin" />);return <Navigate to="/admin" />;}
}

这篇关于react router v6总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---