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(<RouterProvider router={router} />);
Framework Mode (Vite plugin):
// routes.ts
import { index, route } from "@react-router/dev/routes";
export default [
index("./home.tsx"),
route("products/:pid", "./product.tsx"),
];
createBrowserRouter([
{
path: "/dashboard",
Component: Dashboard,
children: [
{ index: true, Component: DashboardHome },
{ path: "settings", Component: Settings },
],
},
]);
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet /> {/* Renders child routes */}
</div>
);
}
{ path: "teams/:teamId" } // params.teamId
{ path: ":lang?/categories" } // Optional segment
{ path: "files/*" } // Splat: params["*"]
Use : Creating/deleting with URL change, adding to history
Use useFetcher: Inline updates, list operations, popovers - no URL change
Use loader: Data before render, server-side fetch, automatic revalidation
Use useEffect: Client-only data, user-interaction dependent, subscriptions
Answer in order. Pass means the condition is true; pick the API on the same line and stop.
useFetcheraction (or useSubmit + navigation). Stop. useFetcher(). Stop. loader vs useEffectloader (Framework: clientLoader when appropriate). Stop. useEffect / event handlers. Stop. | 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 |
共 1 个版本