React Router v7 最佳实践指南：路由配置、数据加载与模式对比
react-router-v7 by existential-birds/beagle
安装命令
npx skills add https://github.com/existential-birds/beagle --skill react-router-v7🇨🇳中文介绍
React Router v7 最佳实践
快速参考
路由器设置（数据模式）：
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(<RouterProvider router={router} />);
框架模式（Vite 插件）：
// routes.ts
import { index, route } from "@react-router/dev/routes";
export default [
index("./home.tsx"),
route("products/:pid", "./product.tsx"),
];
路由配置
嵌套路由与 Outlet
createBrowserRouter([
{
path: "/dashboard",
Component: Dashboard,
children: [
{ index: true, Component: DashboardHome },
{ path: "settings", Component: Settings },
],
},
]);
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet /> {/* 渲染子路由 */}
</div>
);
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
