万普插件库

对比组件式使用对象形式构建，对文件 router/index.tsx 、 APP.tsx 、main.tsx 修改。

关键 import { useRoutes } from "react-router-dom";

router/index.tsx文件

// import App from "../App";
import { JSX, lazy, Suspense } from "react";
// 懒加载
const Home = lazy(() => import("../views/Home"));
const Page1 = lazy(() => import("../views/main/page1"));
const Page2 = lazy(() => import("../views/main/page2"));

import Login from "../views/login";
import Index404 from "../views/404";
// BrowserRouter, Routes, Route,
import { Navigate } from "react-router-dom";
// 组件式写法
// const Router = () => (
//   <BrowserRouter>
//     <Routes>
//       <Route path="/" element={<App />}>
//       {/* 重定向 */}
//       <Route path="/" element={<Navigate to='/home' />}></Route>
//         <Route path="/home" element={<Home />}></Route>
//         <Route path="/about" element={<About />}></Route>
//       </Route>
//     </Routes>
//   </BrowserRouter>
// );

// export default Router;
// 对象形式
// 懒加载
const withLoadingComponent = (comp: JSX.Element) => (
  <Suspense fallback={<div>加载中。。。</div>}>{comp}</Suspense>
);
const routes = [
  {
    path: "/",
    element: <Navigate to="/page1" />,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: "/page2",
        element: withLoadingComponent(<Page2 />),
      },
    ],
  },
  {
    path: "/404",
    element: withLoadingComponent(<Index404 />),
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
];
export default routes;

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "reset-css";
import "@/assets/styles/global.scss";
// import Router from "./router";
import App from "./App.tsx";
import {  Provider } from 'react-redux'
import store from './store'

createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
  <StrictMode>
    {/* 组件式 */}
    {/* <Router /> */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
  </Provider>
);

APP.tsx

// import { useState } from "react";
import { useRoutes } from "react-router-dom";
import routes from "./router";
// import { Button } from "antd";
// import { FullscreenOutlined } from "@ant-design/icons";
function App() {
  // const [] = useState(0);
  const Outlet = useRoutes(routes);
  return (
    <div className="App">
      {/* <Link to="/home">Home</Link>
      <Link to="/about">About</Link> */}
      {/* 组件式 */}
      {/* <Outlet /> */}
      {/* 对象形式 */}
      {Outlet}
    </div>
  );
}

export default App;