React Router 快速上手

基本用法

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/posts/:id', element: <PostDetail /> }
])

<RouterProvider router={router} />

嵌套路由

用 <Outlet /> 渲染子路由；父路由的布局组件通过 Outlet 挂载子页面。

懒加载

const PostDetail = lazy(() => import('./PostDetail'))

配合 <Suspense fallback={<Loading />}> 按需加载，减小首屏体积。

参考

• React Router 文档