# storybook-addon-react-router-v6
> Use React Router v6 in your stories
Latest version **3.0.0** (published 2026-03-12) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install storybook-addon-react-router-v6
pnpm add storybook-addon-react-router-v6
yarn add storybook-addon-react-router-v6
bun add storybook-addon-react-router-v6
```
## Health
**Score 60/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 3.0.0 |
| Published | 2026-03-12 |
| First published | 2022-05-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 687.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 83 |
| Author | Jonathan MASSUCHETTI |
| Maintainers | jesus_the_hun |
| Keywords | storybook, storybook-addons, remix, react, router, react-router, remix-react-router |
## Links
- npm: https://www.npmjs.com/package/storybook-addon-react-router-v6
- Repository: https://github.com/JesusTheHun/storybook-addon-remix-react-router
- Homepage: https://github.com/JesusTheHun/storybook-addon-remix-react-router#readme
- Issues: https://github.com/JesusTheHun/storybook-addon-remix-react-router/issues
- npm.io page: https://npm.io/package/storybook-addon-react-router-v6
## Dependencies (2)
- [react-inspector](https://npm.io/package/react-inspector.md) 6.0.2
- [compare-versions](https://npm.io/package/compare-versions.md) ^6.0.0
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.0.0 (latest) — 2026-03-12
- 3.0.1--canary.68a7a84.0 (canary) — 2024-03-20
- 2.0.15 — 2024-03-20
- 2.0.14 — 2024-03-20
- 2.0.13 — 2024-03-20
- 2.0.12 — 2024-03-12
- 2.0.11 — 2024-03-03
- 2.0.10 — 2023-11-14
- 2.0.10--canary.ab7a299.0 — 2023-11-13
- 2.0.9 — 2023-11-03
- 2.0.8 — 2023-10-17
- 2.0.7 — 2023-08-29
- 2.0.6 — 2023-08-29
- 2.0.5 — 2023-08-18
- 2.0.4 — 2023-08-13
- … 46 more at https://npm.io/package/storybook-addon-react-router-v6/versions
## README
# Storybook Addon React Router v6
[](https://storybook.js.org)
[](https://www.npmjs.com/package/storybook-addon-remix-react-router)
[](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml)
> Use React Router v6 in your stories.
✨Notice ✨
The old package name `storybook-addon-react-router-v6` has been revived to exclusively support React Router v6 with new versions of Storybook going forward.
This will exist alongside the current `storybook-addon-remix-react-router` package, which supports Remix React Router and React Router v7.
The migration is mandatory to support Storybook 9.
## Recent changes
✅ Support for Storybook 9 with `storybook-addon-react-router-v6@4`.
## Getting Started
Install the package
```
npm i -D storybook-addon-remix-react-router
```
Add it to your storybook configuration:
```js
// .storybook/main.ts
export default {
addons: ['storybook-addon-remix-react-router'],
} satisfies StorybookConfig;
```
## Decorate all stories of a component
To add the router to all the stories of a component, simply add it to the `decorators` array.
Note that `parameters.reactRouter` is optional, by default the router will render the component at `/`.
```tsx
import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
export default {
title: 'User Profile',
render: () => ,
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
},
routing: { path: '/users/:userId' },
}),
},
};
```
## Decorate a specific story
To change the config for a single story, you can do the following :
```tsx
import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
export default {
title: 'User Profile',
render: () => ,
decorators: [withRouter],
};
export const FromHomePage = {
parameters: {
reactRouter: reactRouterParameters({
location: {
pathParams: { userId: '42' },
searchParams: { tab: 'activityLog' },
state: { fromPage: 'homePage' },
},
routing: {
path: '/users/:userId',
handle: 'Profile',
},
}),
},
};
```
## Decorate all stories, globally
To wrap all your project's stories inside a router by adding the decorator in your `preview.js` file.
```ts
// .storybook/preview.js
export default {
decorators: [withRouter],
parameters: {
reactRouter: reactRouterParameters({ ... }),
}
} satisfies Preview;
```
## Location
To specify anything related to the browser location, use the `location` property.
```tsx
type LocationParameters = {
path?: string | ((inferredPath: string, pathParams: Record) => string | undefined);
pathParams?: PathParams;
searchParams?: ConstructorParameters[0];
hash?: string;
state?: unknown;
};
```
### Inferred path
If `location.path` is not provided, the browser pathname will be generated using the joined `path`s from the `routing` property and the `pathParams`.
### Path as a function
You can provide a function to `path`.
It will receive the joined `path`s from the routing property and the `pathParams` as parameters.
If the function returns a `string`, is will be used _as is_. It's up to you to call `generatePath` from `react-router` if you need to.
If the function returns `undefined`, it will fallback to the default behavior, just like if you didn't provide any value for `location.path`.
## Routing
You can set `routing` to anything accepted by `createBrowserRouter`.
To make your life easier, `storybook-addon-remix-react-router` comes with some routing helpers :
```tsx
export const MyStory = {
parameters: {
reactRouter: reactRouterParameters({
routing: reactRouterOutlet(),
}),
},
};
```
### Routing Helpers
The following helpers are available out of the box :
```ts
reactRouterOutlet(); // Render a single outlet
reactRouterOutlets(); // Render multiple outlets
reactRouterNestedOutlets(); // Render multiple outlets nested one into another
reactRouterNestedAncestors(); // Render the story as an outlet of nested outlets
```
You can also create your own helper and use the exported type `RoutingHelper` to assist you :
```ts
import { RoutingHelper } from 'storybook-addon-remix-react-router';
const myCustomHelper: RoutingHelper = () => {
// Routing creation logic
};
```
`RouterRoute` is basically the native `RouteObject` from `react-router`; augmented with `{ useStoryElement?: boolean }`.
If you want to accept a JSX and turn it into a `RouterRoute`, you can use the exported function `castRouterRoute`.
### Use the story as the route element
Just set `{ useStoryElement: true }` in the routing config object.
## Dedicated panel
Navigation events, loader and actions are logged, for you to better understand the lifecycle of your components.
## Compatibility
This package aims to support `Storybook > 7` and `React > 16`.
Here is a compatibility table :
| Addon | React | Storybook | React Router |
| ----- | ----------------------- | --------- | ---------------- |
| 4.x | >= 16.8.0 | 9.x | 6.x 1 |
| 3.x | >= 16.8.0 | 8.x | 6.x 1 |
| 2.x | >= v16.8.0 < v19.0.0 | 7.x | 6.x |
| 1.x | >= v16.8.0 < v19.0.0 | 7.x | 6.x |
1 You can actually use react-router v7 if you import from `react-router-dom` and not `react-router`.
If you have an issue with any version, open an issue.
## Contribution
Contributions are welcome.
Before writing any code, file an issue to showcase the bug or the use case for the feature you want to see in this addon.
## License
This package is released under the Apache 2.0 license.
---
_Source: https://npm.io/package/storybook-addon-react-router-v6 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._