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 · API · all subjects

routing architecture

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.

createStaticRouter for server-side rendering

createStaticRouter is used to create a static router for server-side rendering. It takes dataRoutes (from createStaticHandler) and a context object (from the query function), and returns a router instance that can be rendered with StaticRouterProvider.

hydrationData option for createBrowserRouter

createBrowserRouter accepts a second argument options object that can include a hydrationData property. The hydrationData should be populated from window.__staticRouterHydrationData for server-side rendered applications to properly rehydrate the client.

window.__staticRouterHydrationData for SSR rehydration

On the client side after server rendering, hydration data is embedded onto window.__staticRouterHydrationData. This data should be passed to createBrowserRouter via the hydrationData option to properly initialize the client-side router with data from the server render.

createBrowserRouter function signature and usage

createBrowserRouter is a function that takes an array of route configuration objects. Each route object can have properties like path (string) and element (React component). It returns a router instance.

Basic React Router setup example

import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter } from "react-router"; import { RouterProvider } from "react-router/dom"; const router = createBrowserRouter([ { path: "/", element: <div>Hello World</div>, }, ]); const root = document.getElementById("root"); ReactDOM.createRoot(root).render( <RouterProvider router={router} />, );

Data Routers should not be held in React state

Data Routers should be created once outside of the React tree and passed to RouterProvider. They should not be held in React state.

patchRoutesOnNavigation for programmatic route addition

You can use patchRoutesOnNavigation to add additional routes programmatically.

Give your agent this brain