React H5设置企业级v6版本路由的配置

路由配置是项目开发的必要一环，尤其是目前流行SPA，下面看看如何使用v6版本路由进行合理的H5路由配置

一、基本页面结构（目录根据开发要求建，下面仅用于展示配置路由）

二、具体文件实现

1. index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import vconsole from "vconsole";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "normalize.css/normalize.css";
import routes from "./router";

const BASENAME = "/h5";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const router = createBrowserRouter(routes, { basename: BASENAME });

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

if (
  process.env.NODE_ENV === "development" ||
  window.location.search.includes("debug=true")
) {
  new vconsole();
}

2. App.tsx

import { Suspense } from "react";
import { AliveScope } from "react-activation";
import { Outlet } from "react-router-dom";

function App() {
  return (
    <Suspense>
      <AliveScope>
        {/* Outlet是React Router v6中的一个组件，用于在嵌套路由中渲染子路由的组件。它充当一个占位符，表示在这个位置将渲染匹配的子路由组件。 */}
        <Outlet />
      </AliveScope>
    </Suspense>
  );
}

export default App;

3. ./router/index.tsx

import App from "@/App";
import type { RouteObject } from "react-router";
import { Navigate } from "react-router-dom";
// @loadable/component 是一个用于 React 应用程序的库，主要用于实现代码拆分和懒加载。它允许你将组件按需加载，从而减少初始加载时间，提高应用性能。
// 官网：https://loadable-components.com/docs/getting-started/
import loadable from "@loadable/component";
import mainRoutes from "./mainRoutes";
import userRoutes from "./userRoutes";

const NotFound = loadable(() => import("@/pages/NotFound"));

// 在路由的第一层应该在前面加上【/】
// 在 children 里面不需要加【/】,对于嵌套路由，子路径通常不需要以斜杠 (/) 开头，因为它们是相对于父路径解析的。
let routes: RouteObject[] = [
  {
    path: "/",
    element: <App />,
    children: [mainRoutes, userRoutes],
  },
  // 匹配不准确的路由，跳转到 404 页面
  {
    path: "*",
    element: <NotFound />,
  },
];

const Devtool = loadable(() => import("@/pages/Devtool"));

// 如果是开发环境，添加 devtool 页面，用于快速页面跳转
if (process.env.NODE_ENV === "development") {
  routes = [
    {
      path: "/",
      element: <Navigate to={"devtool"} replace />,
    },
    {
      path: "/devtool",
      element: <Devtool />,
    },
    ...routes,
  ];
}

export default routes;

4. ./router/mainRoutes.tsx

import type { RouteObject } from "react-router";
import KeepAlive from "react-activation";
import { lazy } from "react";
import { Navigate } from "react-router-dom";

const MainLayout = lazy(() => import("@/pages/Main/Layout"));

const MainList = lazy(() => import("@/pages/Main/List"));

const MainDetail = lazy(() => import("@/pages/Main/Detail"));

/**
 * 主要业务内容路由
 */
const mainRoutes: RouteObject = {
  path: "main",
  element: <MainLayout />,
  children: [
    // v6重定向用Navigate标签定义跳转
    {
      path: "",
      element: <Navigate to="list" replace />,
    },
    {
      path: "list",
      element: (
        <KeepAlive name="main-list">
          <MainList />
        </KeepAlive>
      ),
    },
    {
      path: "detail",
      element: <MainDetail />,
    },
  ],
};
export default mainRoutes;

5. ./router/userRoutes.tsx

import type { RouteObject } from "react-router";
import { lazy } from "react";

const UserLayout = lazy(() => import("@/pages/User/Layout"));

const UserInfo = lazy(() => import("@/pages/User/UserInfo"));

/**
 * 用户信息模块路由
 */
const userRoutes: RouteObject = {
  path: "user",
  element: <UserLayout />,
  children: [
    {
      path: "info",
      element: <UserInfo />,
    },
  ],
};

export default userRoutes;

6. Layout.tsx

import { Outlet } from "react-router-dom";

const Layout = () => {
  return <Outlet />;
};

export default Layout;