React Router
Contents
This guide walks you through setting up PostHog for React Router. React Router V7 has three distinct modes, and each will require different setup. If you're still on React Router V6, we have a guide for that, too.
Which version/mode am I using?
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 will require 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 |
|---|---|
| Framework mode (Remix V3) | This is the default mode. In framework mode, React Router functions as an SSR (server-side rendering) framework. |
| Declarative mode | In declarative mode, you can build SPA (single-page applications) with basic routing. |
| 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. |