路由
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>
|