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>
        <Layout
          style={{
            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" />;
  }
}