react18 useRoutes嵌套路由及懒加载

之前写过react16的嵌套路由及懒加载的方案react 中的 suspense 和 lazy 与 动态路由加载

react18中发现嵌套路由的活儿框架已经干了。勤劳的框架，我们直接使用就好了

npm install react-router-dom react-router --save

创建src/routers.tsx

import React, {lazy, Suspense} from 'react';
import {RouteObject, useRoutes} from 'react-router'
import Loading from '@/component/loading/loading';
import Home from '@/component/home/home'

let Page1 = lazy(()=>import('./component/page/page1'));
const routes:RouteObject[]=[{
    path:'/',
    element:<Home/>,
    children:[{
        path:'/page1'
        element:<Suspense fallback={<Spin/>}><Page1/></Suspense>
    }]
}];

export default function Routers(){
    let element = useRoutes(routes);
    return element;
}

修改src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom'
import Routers from './routers';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
    <Recat.strictMode>
        <BrowserRouter>
            <Routers/>
        </BrowserRouter>
    </Recat.strictMode>
)