# React Router v7 Guide
## As a script tag
Add the script tag to your `Layout` component in the `app/root`.
Refer to the [CDN Guide](https://github.com/aidenybai/react-scan/blob/main/docs/installation/cdn.md) for the available URLs.
```jsx
// app/root
// ...
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// ...
```
> [!CAUTION]
> This only works for React 19
## As an import
Add the following code to your `app/root`
```jsx
// app/root
// Must be imported before React Router
import { scan } from "react-scan";
import { Links, Meta, Scripts, ScrollRestoration } from "react-router";
import { useEffect } from "react";
export function Layout({ children }) {
useEffect(() => {
// Make sure to run react-scan only after hydration
scan({
enabled: true,
});
}, []);
return (
{children}
);
}
// ...
```
If you want react-scan to also run in production, use the react-scan/all-environments import path
```diff
- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";
```
> [!CAUTION]
> React Scan must be imported before React (and other React renderers like React DOM), as well as React Router, in your entire project, as it needs to hijack React DevTools before React gets to access it.