Root Route

FIXME: This is mostly the wrong doc, right code.

These components are to be used once inside your root route (root.tsx). They include everything Remix figured out or built in order for your page to render properly.

  1. import type {
  2.   LinksFunction,
  3.   MetaFunction,
  4. } from "@remix-run/node"; // or cloudflare/deno
  5. import {
  6.   Links,
  7.   LiveReload,
  8.   Meta,
  9.   Outlet,
  10.   Scripts,
  11.   ScrollRestoration,
  12. } from "@remix-run/react";
  14. import globalStylesheetUrl from "./global-styles.css";
  16. export const links: LinksFunction = () => {
  17.   return [{ rel: "stylesheet", href: globalStylesheetUrl }];
  18. };
  20. export const meta: MetaFunction = () => ({
  21.   charset: "utf-8",
  22.   title: "My Amazing App",
  23.   viewport: "width=device-width, initial-scale=1",
  24. });
  26. export default function App() {
  27.   return (
  28.     <html lang="en">
  29.       <head>
  30.         {/* All meta exports on all routes will go here */}
  31.         <Meta />
  33.         {/* All link exports on all routes will go here */}
  34.         <Links />
  35.       </head>
  36.       <body>
  37.         {/* Child routes go here */}
  38.         <Outlet />
  40.         {/* Manages scroll position for client-side transitions */}
  41.         {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
  42.         <ScrollRestoration />
  44.         {/* Script tags go here */}
  45.         {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
  46.         <Scripts />
  48.         {/* Sets up automatic reload when you change code */}
  49.         {/* and only does anything during development */}
  50.         {/* If you use a nonce-based content security policy for scripts, you must provide the `nonce` prop. Otherwise, omit the nonce prop as shown here. */}
  51.         <LiveReload />
  52.       </body>
  53.     </html>
  54.   );
  55. }

You can pass extra props to <Scripts /> like <Scripts crossOrigin /> for hosting your static assets on a different server than your app.

The example above renders several <script /> tags into the resulting HTML. While this usually just works, you might have configured a content security policy for scripts that prevents these <script /> tags from being executed. In particular, to support content security policies with nonce-sources for scripts, the <Scripts />, <LiveReload /> and <ScrollRestoration /> components support a nonce property, e.g.<Script nonce={nonce}/>. The provided nonce is subsequently passed to the <script /> tag rendered into the HTML by these components, allowing the scripts to be executed in accordance with your CSP policy.

See also: