React Router
Contents
This guide walks you through setting up PostHog for React Router. React Router V7 has three distinct modes, and each requires a different setup. If you're still on React Router V6, we have a guide for that, too.
Install with the wizard
Run this command in your project directory to add PostHog to your React Router project. The wizard detects your framework, installs the SDK, and sets up your first events.
Or set it up manually by following the rest of this guide.
Which version/mode am I using?
Pick the right guide for you
Check your package.json file for the react-router version.
Differentiating between React Router versions and modes
Here's are quick tips to help you figure out which version/mode you're using:
First, check your package.json file for the react-router version. If it's 7.x.x, you're using React Router V7. If it's 6.x.x, you're using React Router V6.
Then check your project to distinguish between the different modes:
- If you see a
react-router.config.tsfile, you're using React Router V7 in framework mode. - If your router is configured like this:
<RouterProvider router={router} />with router being acreateBrowserRouterinstance, you're using React Router V7 in data mode. - Finally, if your router has
<Routes>and<Route>elements, you're using React Router V7 in declarative mode.
Follow the React Router docs for more details.
React Router guides
React Router V7 has three distinct modes, and each requires a different setup. Some modes require only the client-side React SDK, while others require both the client-side React SDK and the server-side Node SDK.
Follow the React Router docs to find out which mode you're using, then follow the guide for that mode:
| Guide | Description |
|---|---|
| V7 - Framework mode (Remix V3) | This is the default mode. In framework mode, React Router functions as an SSR (server-side rendering) framework. |
| V7 - Declarative mode | In declarative mode, you can build SPAs (single-page applications) with basic routing. |
| V7 - Data mode | Data mode is also for building SPAs, but comes with APIs like loader, action, and useFetcher. |
| React Router V6 | React Router V6 is for building SPAs and has features similar to React Router V7 in declarative or data mode. |