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

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

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

二、具体文件实现

1. index.tsx

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
import { Outlet } from "react-router-dom";

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

export default Layout;
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5