React Router v6 学习笔记03

1、useRoutes集中式路由渲染——实现模块分类

与vue-router一样实现router的模块化集中管理

路由数据格式如下，实现路由模块分离

router.js

import { lazy } from 'react'
const Home=lazy(()=>import('../pages/Home'))
const Login=lazy(()=>import('../pages/Login'))
const Layout=lazy(()=>import('../components/Layout'))
const User=lazy(()=>import('../pages/User'))
const UserDetail=lazy(()=>import('../pages/User/UserDetail'))
const router = [
    {
        path: "/",                      //匹配的路径
        element: <Layout />,            //匹配组件
        caseSensitive:true,             //默认不区分大小写，设置true则区分
        children: [
            {
                index: true,
                element: <Home />
            },
            {
                path: '/user',
                element:<User />,
            },
            {
                path: '/user/detail/:id',//动态路由传递参数
                element:<UserDetail />,
            },
        ]
    },
    {
        path:'/login',
        element:<Login/>,
        caseSensitive:true
    }
]
export default router

 app.js

//1、在函数组件中使用useRoutes
import router from "./router"
function App(){
  const routes=useRoutes(router)
  return routes
}
export default App

 2、页面懒加载

优化代码，当页面使用到该组件时才加载

import { lazy } from 'react'
const Home=lazy(()=>import('../pages/Home'))
const Login=lazy(()=>import('../pages/Login'))

页面懒加载导致的闪屏问题解决（设置加载组件）

使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互

import { Suspense } from 'react'
const Layout=lazy(()=>import('../components/Layout'))
const lazyLoad=(children)=>{
    return(<Suspense fallback={<>loading</>}>
        {children}
    </Suspense>)
}
const router = [
    {
        path: "/",                      //匹配的路径
        element: lazyLoad(<Layout />),            //匹配组件
        caseSensitive:true,
            }
]
export default router

使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互