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>
)
}