react-router-v7
提供React Router v7最佳实践快速参考，包括路由器设置。
npx skills add existential-birds/beagle --skill react-router-v7Before / After 效果对比
1 组1import { BrowserRouter, Routes, Route } from 'react-router-dom';
2
3function App() {
4 return (
5 <BrowserRouter>
6 <Routes>
7 <Route path="/" element={<Home />} />
8 <Route path="/products/:productId" element={<Product />} />
9 </Routes>
10 </BrowserRouter>
11 );
12}1import { createBrowserRouter, RouterProvider } from 'react-router-dom';
2
3const router = createBrowserRouter([
4 {
5 path: "/",
6 Component: Root,
7 loader: rootLoader,
8 children: [
9 { index: true, Component: Home },
10 { path: "products/:productId", Component: Product, loader: productLoader },
11 ],
12 },
13]);
14
15function App() {
16 return <RouterProvider router={router} />;
17}description SKILL.md
react-router-v7
React Router v7 Best Practices Quick Reference Router Setup (Data Mode): 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(); Framework Mode (Vite plugin): // routes.ts import { index, route } from "@react-router/dev/routes"; export default [ index("./home.tsx"), route("products/:pid", "./product.tsx"), ]; Route Configuration Nested Routes with Outlets createBrowserRouter([ { path: "/dashboard", Component: Dashboard, children: [ { index: true, Component: DashboardHome }, { path: "settings", Component: Settings }, ], }, ]); function Dashboard() { return ( Dashboard {/* Renders child routes /} ); } Dynamic Segments and Splats { path: "teams/:teamId" } // params.teamId { path: ":lang?/categories" } // Optional segment { path: "files/" } // Splat: params["*"] Key Decision Points Form vs Fetcher Use : Creating/deleting with URL change, adding to history Use useFetcher: Inline updates, list operations, popovers - no URL change Loader vs useEffect Use loader: Data before render, server-side fetch, automatic revalidation Use useEffect: Client-only data, user-interaction dependent, subscriptions Additional Documentation Data Loading: See references/loaders.md for loader patterns, parallel loading, search params Mutations: See references/actions.md for actions, Form, fetchers, validation Navigation: See references/navigation.md for Link, NavLink, programmatic nav Advanced: See references/advanced.md for error boundaries, protected routes, lazy loading Mode Comparison Feature Framework Mode Data Mode Declarative Mode Setup Vite plugin createBrowserRouter Type Safety Auto-generated types Manual Manual SSR Support Built-in Manual Limited Use Case Full-stack apps SPAs with control Simple/legacy Weekly Installs221Repositoryexistential-birds/beagleGitHub Stars39First SeenJan 20, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode160gemini-cli156github-copilot155codex151cursor123claude-code120
forum用户评价 (0)
发表评价
暂无评价，来写第一条吧
统计数据
用户评分
为此 Skill 评分