【React】react路由配置 useRoutes

App.tsx文件

import { useRoutes } from 'react-router-dom'
import router from './router';
function App(){
const outlet = useRoutes(router )
 return (
    <div className="App node" >
      {outlet}
    </div>
  );
}
export default App

router.tsx文件

import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom';
import Home from "../views/Home";
const A= lazy(() => import('../views/A'));
const B = lazy(() => import('../views/B'));
const C= lazy(() => import('../views/C'));
const D= lazy(() => import('../views/D'));
const E= lazy(() => import('../views/E'));
const F= lazy(() => import('../views/F'));
//懒加载的模式需要我们添加一个Loading组件
const LoadingCom= (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)
const router = [
    {
        path: '/',
        element: <Navigate to='/a' />
    },
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/a',
                element: LoadingCom(<A/>)
            },
            {
                path: '/a/b',
                element: LoadingCom(<B/>)
            },
            {
                path: '/a/c',
                element: LoadingCom(<C/>)
            },
            {
                path: '/a/d',
                element: LoadingCom(<D/>)
            },
            {
                path: '/a/e',
                element: LoadingCom(<E/>)
            },
            {
                path: '/a/f',
                element: LoadingCom(<F/>)
            },
        ]
    },
    //但跳转到没有的路径时，重定向到首页
    {
        path: '*',
        element: <Navigate to='/a' />
    }
]
export default router

Home.tsx文件

import { Outlet } from "react-router-dom";
const View =()=>{
return (
 <>
   <div style={{ height: "50px" }}>
       头部
   </div>
   <div style={{ height: "50px" }}>
       左侧
   </div>
   <div style={{ height: "50px" }}>
            {/* 窗口部分 */}
              <Outlet />
              <div style={{ height: "50px" }}>
                底部
             </div>
   </div>
 </>
 )
}
export default (View);