Router.js路由文件配置

import React, {lazy} from 'react';
import {createBrowserRouter} from 'react-router-dom';

const Login = lazy(() => import('../page/login/Login.jsx'));
const Home = lazy(() => import('../page/home/Home.jsx'));
const User = lazy(() => import('../page/user/User.jsx'));
const UserDetail1 = lazy(() => import('../page/userdetail/UserDetail1.jsx'));
const UserDetail2 = lazy(() => import('../page/userdetail/UserDetail2.jsx'));
const Goods = lazy(() => import('../page/goods/Goods.jsx'));
const GoodsDetail = lazy(() => import('../page/goodsdetail/GoodsDetail.jsx'));
const System = lazy(() => import('../page/system/System.jsx'));
const Record = lazy(() => import('../page/record/Record.jsx'));
const Class = lazy(() => import('../page/class/Class.jsx'));
const ErrorPage = lazy(() => import('../page/errorpage/ErrorPage.jsx'));
const MainLayout = lazy(() => import('../layout/MainLayout.jsx'));
const Load = lazy(() => import('../page/load/Load.jsx'));

const Router = createBrowserRouter([
  	{
    	path: "/",
    	element: <Login/>
	},
	{
    	element: <MainLayout/>,
    	children: [
	      {
	        path: "home",
	        element:<Home/>
	      },
	      {
	        path: "user",
	        element: <User/>
	      },
	      {
	        path: "userdetail1",
	        element: <UserDetail1/>
	      },
	      {
	        path: "userdetail2",
	        element: <UserDetail2/>
	      },
	      {
	        path: "goods",
	        element: <Goods/>
	      },
	      {
	        path: "goodsdetail",
	        element: <GoodsDetail/>
	      },
	      {
	        path: "class",
	        element:<Class/>
	      },
	      {
	        path: "system",
	        element:<System/>
	      },
	      {
	        path: "record",
	        element: <Record/>
	      },
	      {
	        path: "*",
	        element: <ErrorPage/>
	      }
	    ],
	},
	{
    	path: "*",
    	element: <ErrorPage/>
  	}	
]);

export default Router

main.js文件配置

import React,{ StrictMode ,Suspense} from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import Router from './router/router.jsx';
import Load from './page/load/Load';
import './index.css';
import "antd/dist/antd.css";

createRoot(document.getElementById('root')).render(
	<Suspense fallback={<Load/>}>
  		<RouterProvider router={Router}/>
  	</Suspense>
)