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

scripts

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

Scripts component props

The Scripts component accepts scriptProps parameter which takes additional props to spread onto the <script> tags, such as crossOrigin, nonce, and other standard script element attributes.

Scripts component example

Example of using the Scripts component: import { Scripts } from "react-router"; export default function Root() { return ( <html> <head /> <body> <Scripts /> </body> </html> ); }

Scripts component

The Scripts component renders the client runtime of your app. It should be rendered inside the <body> of the document. If server rendering, you can omit <Scripts/> and the app will work as a traditional web app without JavaScript, relying solely on HTML and browser behaviors.

Scripts component signature

The Scripts component has the signature: function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null

ScrollRestoration getKey prop

The getKey prop is a function that returns a key to use for scroll restoration. It receives location and matches as arguments. This is useful for custom scroll restoration logic, such as using only the pathname so that later navigations to prior paths will restore the scroll. Defaults to location.key.

ScrollRestoration getKey example with pathname

<ScrollRestoration getKey={(location, matches) => { // Restore based on a unique location key (default behavior) return location.key // Restore based on pathname return location.pathname }} />

ScrollRestoration nonce prop

The nonce prop is a nonce attribute to render on the <script> element. If not provided in Framework Mode, it will default to any <ServerRouter nonce> prop.

ScrollRestoration basic usage example

import { ScrollRestoration } from "react-router"; export default function Root() { return ( <html> <body> <ScrollRestoration /> <Scripts /> </body> </html> ); }

ScrollRestoration storageKey prop

The storageKey prop is the key to use for storing scroll positions in sessionStorage. It defaults to "react-router-scroll-positions".

ScrollRestoration renders inline script to prevent scroll flashing

ScrollRestoration renders an inline <script> element to prevent scroll flashing. The nonce prop will be passed down to the script tag to allow CSP nonce usage.

ScrollRestoration component purpose

ScrollRestoration emulates the browser's scroll restoration on location changes. Apps should only render one ScrollRestoration component, right before the Scripts component.

ScrollRestoration signature

function ScrollRestoration({ getKey, storageKey, ...props }: ScrollRestorationProps)

Give your agent this brain