new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

React Router · Getting started · all subjects

custom framework/client rendering

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createBrowserRouter API for custom frameworks

createBrowserRouter is the browser runtime API that enables route module APIs (loaders, actions, etc.). It takes an array of route objects that support loaders, actions, error boundaries and more. You can create one manually or with an abstraction and use your own bundler instead of relying on the React Router Vite plugin.

Client rendering with RouterProvider

To render a router in the browser, use the RouterProvider component. Pass the router created with createBrowserRouter as the router prop to RouterProvider, then render it using createRoot from react-dom/client.

Lazy loading routes with lazy property

Routes can take most of their definition lazily using the lazy property. The lazy property can contain loader, action, and Component as async functions that dynamically import the actual implementations.

createBrowserRouter example with loaders

Example of creating a browser router with loaders in Data Mode: ```tsx import { createBrowserRouter } from "react-router"; let router = createBrowserRouter([ { path: "/", Component: Root, children: [ { path: "shows/:showId", Component: Show, loader: ({ request, params }) => fetch(`/api/show/${params.showId}.json`, { signal: request.signal, }), }, ], }, ]); ```

RouterProvider rendering example

Example of rendering a router with RouterProvider: ```tsx import { createBrowserRouter, RouterProvider, } from "react-router"; import { createRoot } from "react-dom/client"; const router = createBrowserRouter([...]); createPrimaryRoot(document.getElementById("root")).render( <RouterProvider router={router} />, ); ```

Lazy loading example

Example of lazy loading route definitions: ```tsx createBrowserRouter([ { path: "/show/:showId", lazy: { loader: async () => (await import("./show.loader.js")).loader, action: async () => (await import("./show.action.js")).action, Component: async () => (await import("./show.component.js")).Component, }, }, ]); ```

Client Side Rendering configuration

To disable server rendering and build a Single Page App, set ssr: false in react-router.config.ts. Routes are always client side rendered as the user navigates around the app.

Give your agent this brain