react-router-dom6 路由配置(数组配置项形式)，并且实现懒加载

主要利用v6版本的Hook useRoutes()完成配置，关于useRoutes()的介绍可以看官网reactrouter.com/en/main/hoo…

直接上文件，简单明了

1.路由配置文件（懒加载）

//src/router/router.js
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
// 懒加载路由
const Home = lazy(()=>import("@/pages/Home/Home"))
const Login = lazy(()=>import("@/pages/Login/Login"))

const User = lazy(()=>import("@/pages/User/User"))

// import Home from "@/pages/Home/Home"
// import Login from "@/pages/Login/Login"
// import User from "@/pages/User/User"

const router = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/login',
    element: <Login />,
    children: [{
      index: true,
      element: <Navigate to={"/login/child"} /> // 默认打开
    },
    {
      path: '/login/child',
      element: <User />
    }, {
      path: '/login/child2',

      element: <Home />
    },]
  },
  {
    path: '/user',
    element: <User />
  }, {
    path: '*',
    element: <>404</>
  }
]
export default router

2.在App.tsx中使用

// src/App.tsx
import React from 'react'
import { useRoutes} from 'react-router-dom'
import { Suspense } from 'react'
import router from './router'
// import "./assets/css/reset.scss"
import "@/assets/css/reset.scss"
import "@/assets/css/common.scss"

function App() {
  return <Suspense fallback={<>loading</>}>
  {
       useRoutes(router)
  }
</Suspense>
}

export default App

3.别忘了在index.tsx中包裹 BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import store from './store'
import { BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <Provider store={store}>
      <BrowserRouter>

            <App />
      </BrowserRouter>

    </Provider>
);

reportWebVitals();

这样就完成了基础的路由配置，其他的自己扩展就好了。

如果帮到你的话，麻烦点个👍支持一波。谢谢。