React路由懒加载

router文件夹下的index.tsx

import { lazy, Suspense } from "react"

const Home = lazy(() => import("@/pages/home"))
const Classfiy = lazy(() => import("@/pages/classfiy"))
const Form = lazy(() => import("@/pages/form"))
const RichText = lazy(() => import("@/pages/richText"))
const Login = lazy(() => import("@/pages/login"))
const Index = lazy(() => import("@/pages/index"))
const Error = lazy(() => import("@/pages/error"))
const Mine = lazy(() => import("@/pages/mine"))
const LrIndex = lazy(() => import("@/pages/lrIndex"))
const Register = lazy(() => import("@/pages/register"))
const List = lazy(() => import("@/pages/list"))


const lazyElement = (value: JSX.Element) => <Suspense fallback={<div>Loading...</div>}>{value}</Suspense>

export const routes = [
  {
    path: "/",
    name: "home",
    element: lazyElement(<Home />),
    children: [
      {
        path: "/",
        name: "index",
        element: lazyElement(<Index />),
        children: [
          {
            path: "/",
            name: "form",
            element: lazyElement(<Form />),
          },
          {
            path: "/richText",
            name: "richText",
            element: lazyElement(<RichText />),
          },
          {
            path: "/list",
            name: "list",
            element: lazyElement(<List />),
          },
        ],
      },
      {
        path: "/mine",
        name: "mine",
        element: lazyElement(<Mine />),
      },
      {
        path: "/classfiy",
        name: "classfiy",
        element: lazyElement(<Classfiy />),
      },
    ],
  },
  {
    path: "/login",
    name: "lrIndex",
    element: lazyElement(<LrIndex />),
    children: [
      {
        path: "/login",
        name: "login",
        element: lazyElement(<Login />),
      },
      {
        path: "/login/register",
        name: "register",
        element: lazyElement(<Register />),
      },
    ]
  },
  {
    path: "/*",
    name: "error",
    element: lazyElement(<Error />),
  },
]

App.tsx

import { routes } from "@/router/index"
import { useRoutes, useNavigate, useLocation } from "react-router-dom"
import { useEffect } from "react"

export default function App() {
  const location = useLocation()
  const outLet = useRoutes(routes)
  const navigate = useNavigate()

  /**
   * 初始化导航守卫
   */
  useEffect(() => {
    const writePath: String[] = ["/", "/login", "/classfiy", "/mine", "/login/register"]
    if (!writePath.includes(location.pathname)) { // 判断跳转的页面是否属于白名单的，如果不是，则判断token，如果是则直接放行
      if ([null, ""].includes(localStorage.getItem("token"))) { // 判断是否有 token 的值，有就继续，没有则跳转登录
        navigate({
          pathname: "./login"
        })
      }
    }
  }, [location.pathname])

  /**
   * 渲染页面
   */
  return <div>{outLet}</div>
}

main.tsx

import ReactDOM from "react-dom/client"
import App from "@/App"
import "@/config/index.scss"
import "@/config/icon.scss"
import { BrowserRouter } from "react-router-dom"
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

使用的是history路由模式

需要引入：BrowserRouter、useRoutes、lazy、 Suspense