react-router-dom@6.x使用懒加载

App.js

import { useEffect, lazy, Suspense } from 'react'
import { NavLink, Route, Routes, Navigate, useLocation } from 'react-router-dom'
import Loading from './components/Loading/Loading'
import './css/App.css'
const Home = lazy(() => import('./views/Home'))
const About = lazy(() => import('./views/About'))
function App() {
  const location = useLocation()
  useEffect(() => {
    // document.title = location.state.title
    if (location.state) {
      document.title = location.state.title
    } else {
      document.title = '组件验证'
    }
  }, [location.state])
  return (
    <div className="App">
      <div>
        <NavLink to="/home" state={{title: '组件验证'}} className="navigation">组件验证</NavLink>
        <NavLink to="/about" state={{title: '高阶组件'}} className="navigation">高阶组件</NavLink>
      </div>
      <Routes>
        <Route path='/home' element={<Suspense fallback={<Loading />}><Home /></Suspense>} />
        <Route path='/about' element={<Suspense fallback={<Loading />}><About /></Suspense>} />
        <Route path='/' element={ <Navigate to="/home" replace /> } />
      </Routes>
    </div>
  );
}
 
export default App;

Loadin.jsx

import React from 'react'
import { Spin } from 'antd'
export default function Loading() {
  return (
    <Spin tip="Loading">
      <div className="content" />
    </Spin>
  )
}