路由
1
2
3
4
5
6
7
8
|
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { useRoutes, Link } from 'react-router-dom'
import router from './router/index'
function App() {
const outlet = useRoutes(router);
return (
<>
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</div>
{outlet}
</>
)
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import Home from '@/views/Home'
import About from '@/views/About'
const router = [
{
path: '/',
element: <Home />,
},
{
path: '/about',
element: <About />,
}
]
export default router;
|
路由懒加载：
使用 react 的 lazy 模块
1
2
| import {lazy} from 'react';
const About = lazy(() => import('@/views/About'))
|
Suspense 组件用于指定加载中时要显示的组件：
1
2
3
4
|
<Suspense fallback={<div>Loading...</div>}>
{outlet}
</Suspense>
|