React Router v7 最佳实践

快速参考

路由器设置（数据模式）：
tsx
import { createBrowserRouter, RouterProvider } from react-router;

const router = createBrowserRouter([
{
path: /,
Component: Root,
ErrorBoundary: RootErrorBoundary,
loader: rootLoader,
children: [
{ index: true, Component: Home },
{ path: products/:productId, Component: Product, loader: productLoader },
],
},
]);

ReactDOM.createRoot(root).render();

框架模式（Vite 插件）：
ts
// routes.ts
import { index, route } from @react-router/dev/routes;

export default [
index(./home.tsx),
route(products/:pid, ./product.tsx),
];

路由配置

嵌套路由与 Outlet

tsx
createBrowserRouter([
{
path: /dashboard,
Component: Dashboard,
children: [
{ index: true, Component: DashboardHome },
{ path: settings, Component: Settings },
],
},
]);

function Dashboard() {
return (

动态段与通配符

tsx
{ path: teams/:teamId } // params.teamId
{ path: :lang?/categories } // 可选段
{ path: files/ } // 通配符：params[]

关键决策点

Form 与 Fetcher

使用