react项目--路由封装

import React, { lazy } from "react";

import Home from "../views/Home";
import Login from "@/views/Login";
const Page1 = lazy(() => import("../views/Page1"));
const Page2 = lazy(() => import("../views/Page2"));
const Page301 = lazy(() => import("../views/Page301"));

// Navigate重定向组件
import { Navigate } from "react-router-dom";

// 路由懒加载报错：react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
// 懒加载的模式需要我们给他加上一层 Loading的提示加载组件
const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>
);

const routes = [
  // 嵌套路由
  {
    path: "/",
    element: <Navigate to="/page1" />,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: "/page2",
        element: withLoadingComponent(<Page2 />),
      },{
        path: "/page3/page301",
        element: withLoadingComponent(<Page301 />),
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  // 错误路径跳转
  {
    path:"*",
    element:<Navigate to="/page1" />,
  }
];

export default routes;