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;