Scripts

Framework
Data
Declarative

Summary

Renders the client runtime of your app. It should be rendered inside the <body> of the document.

import { Scripts } from "react-router";

export default function Root() {
  return (
    <html>
      <head />
      <body>
        <Scripts />
      </body>
    </html>
  );
}

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.

Props

ScriptsProps

A couple common attributes:

<Scripts crossOrigin> for hosting your static assets on a different server than your app.
<Scripts nonce> to support a content security policy for scripts with nonce-sources for your <script> tags.

You cannot pass through attributes such as async, defer, src, type, noModule because they are managed by React Router internally.