5.react-router-dom v6使用useRoutes踩坑点

useRoutes的用法

1.路由表 需要用.tsx或.jsx，否则使用Home赋值给element会报错

import React,{lazy} from "react";
import {RouteObject,Navigate} from "react-router-dom"
//使用懒加载
const Home = lazy(() => import('../pages/home/index'))
const My = lazy(() => import('../pages/my/index'))

const routes:RouteObject[]=[//使用路由表的类型
	{
        path:'/',
        element:<Navigate to='/home'/>//根目录自动渲染home页面
    },
    {
        path:'/home',
        element:<Home/>
    },
    {
        path:'/my',
        element:<My/>
    }
]

export default routes;

2.useRoutes()生成路由

1)使用useRoutes生成路由组件，再放进BrowserRouter，否则会报错
const GetRoutes = () => useRoutes(routes)

2)需要引入Suspense包裹BrowserRouter，否则路由未加载，页面会报错

import { useEffect, useState, Suspense } from 'react'
import { useRoutes } from 'react-router-dom';
import { BrowserRouter, NavLink } from 'react-router-dom';

const BasicLayout: React.FC = () => {
    const GetRoutes = () => useRoutes(routes)
    useEffect(() => {
        let list: TabListType = [
            {
                title: '首页',
                path: '/home',
                icon: 'iconW_home',
                activeIcon: 'icon_xuanz_home'
            },
          	...
        ]
        setTabList(list)
    }, [])

    return (
        <ConfigProvider>
            <Suspense>
                <BrowserRouter>
                    <div className="app-container">
                        <Layout className='app-container-layout flex column justify-between'>
                            <Content className='app-content'>
                                <GetRoutes></GetRoutes>
                            </Content>
                            <Footer className='app-footer flex justify-between align-center'>
                                {
                                    tabList.map((item, index) => {
                                        return (
                                            <NavLink key={index} to={item.path} className={({ isActive }) => (isActive ? 'tab-item active' : 'tab-item')}>
                                                <Image preview={false} width={20} src={`${iconPath}${item.icon}.svg`}></Image>
                                                <span>{item.title}</span>
                                            </NavLink>
                                        )
                                    })
                                }
                            </Footer>
                        </Layout>
                    </div>
                </BrowserRouter>
            </Suspense>
        </ConfigProvider>
    )
}

export default BasicLayout;