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.
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.