Discuss route object?

Question

Accepted Answer

**Component:** The Component property in a route object defines the component that will render when the route matches. **Loader:** Route loaders provide data to route components before they are rendered. **Action:** Route actions allow server-side data mutations with automatic revalidation of all loader data on the page when called from

, useFetcher, and useSubmit. **shouldRevalidate:** By default, all routes are revalidated after actions. This function allows a route to opt-out of revalidation for actions that don't affect its data. **lazy:** Most properties can be lazily imported to reduce the initial bundle size. createBrowserRouter([ { path: "/", Component: MyRouteComponent, }, ]); function MyRouteComponent() { return (

Look ma!

I'm still using React Router after like 10 years.

); } import { useLoaderData, createBrowserRouter, } from "react-router"; createBrowserRouter([ { path: "/", loader: loader, Component: MyRoute, }, ]); async function loader({ params }) { return { message: "Hello, world!" }; } function MyRoute() { let data = useLoaderData(); return

{data.message}

; } import { createBrowserRouter, useLoaderData, useActionData, Form, } from "react-router"; import { TodoList } from "~/components/TodoList"; createBrowserRouter([ { path: "/items", action: action, loader: loader, Component: Items, }, ]); async function action({ request }) { const data = await request.formData(); const todo = await fakeDb.addItem({ title: data.get("title"), }); return { ok: true }; } // this data will be revalidated after the action completes... async function loader() { const items = await fakeDb.getItems(); return { items }; } // ...so that the list here is updated automatically export default function Items() { let data = useLoaderData(); return (

); } import type { ShouldRevalidateFunctionArgs } from "react-router"; function shouldRevalidate( arg: ShouldRevalidateFunctionArgs ) { return true; // false } createBrowserRouter([ { path: "/", shouldRevalidate: shouldRevalidate, Component: MyRoute, }, ]); createBrowserRouter([ { path: "/app", lazy: async () => { // load component and loader in parallel before rendering const [Component, loader] = await Promise.all([ import("./app"), import("./app-loader"), ]); return { Component, loader }; }, }, ]);

Discuss route object?

The objects passed to createBrowserRouter are called Route Objects.

Discuss route object?

The objects passed to createBrowserRouter are called Route Objects.

Scenario Questions

Follow-up Questions