Registry / web-framework / storybook-addon-remix-react-router

storybook-addon-remix-react-router

library6.1.0jsnpmunverified

This Storybook addon integrates Remix React Router into your stories, enabling comprehensive testing and demonstration of components that rely on React Router's navigation and state management. The current stable version is 6.1.0, released recently in March 2026, indicating an active development and maintenance cadence with frequent updates to support new Storybook and React Router versions. A key differentiator is its explicit support for `react-router@7` and newer, making a clear distinction from earlier versions (v3 and below) that supported `react-router-dom`. It provides a `withRouter` decorator and `reactRouterParameters` to configure routes, locations, path parameters, search parameters, and state directly within your stories, allowing for precise control over the routing context for each component variant. This addon ensures that components designed for a Remix React Router environment can be faithfully rendered and interacted with in isolation within Storybook.

web-framework testing

npm install storybook-addon-remix-react-router

github ↗package ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-RE

storybook-addon-remix-react-router

web-frameworkjavascriptv6.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withRouter

✓ import { withRouter } from 'storybook-addon-remix-react-router';

✗ const { withRouter } = require('storybook-addon-remix-react-router');

Primarily used in ESM contexts like .storybook/preview.ts. The CommonJS require syntax is generally incorrect for Storybook addon configuration.

reactRouterParameters

✓ import { reactRouterParameters } from 'storybook-addon-remix-react-router';

✗ import reactRouterParameters from 'storybook-addon-remix-react-router';

This is a named export. Attempting a default import will result in 'undefined' or a TypeError. Also, ensure correct casing.

StorybookConfig

✓ import type { StorybookConfig } from '@storybook/types';

While not directly from this addon, `StorybookConfig` is essential for type-checking Storybook configuration files where this addon is typically configured. It's an implicit dependency for TypeScript users.

Demonstrates how to configure and use the `withRouter` decorator and `reactRouterParameters` to set up routing context for a `UserProfile` component in Storybook, including path parameters and search parameters for different story states.

import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router'; import type { Meta, StoryObj } from '@storybook/react'; import { Outlet, Link } from 'react-router-dom'; // Example component using router hooks const UserProfile = () => ( <div> <h1>User Profile Page</h1> <p>Viewing profile for user ID: <Outlet /></p> <nav> <Link to="/users/42">Profile</Link> | <Link to="/users/42?tab=activityLog">Activity Log</Link> </nav> </div> ); const meta: Meta<typeof UserProfile> = { title: 'User Profile', component: UserProfile, decorators: [withRouter], parameters: { reactRouter: reactRouterParameters({ location: { pathParams: { userId: '42' }, searchParams: { tab: 'profile' }, state: { fromPage: 'homePage' } }, routing: { path: '/users/:userId' }, }), }, }; export default meta; type Story = StoryObj<typeof UserProfile>; export const Default: Story = {}; export const ActivityLogTab: Story = { parameters: { reactRouter: reactRouterParameters({ location: { pathParams: { userId: '42' }, searchParams: { tab: 'activityLog' } }, routing: { path: '/users/:userId' } }) } };

Debug

Known issues

breakingVersion 4.0.0 of `storybook-addon-remix-react-router` dropped support for `react-router-dom` imports in favor of `react-router` only, aligning with Remix's deprecation of `react-router-dom` in new projects.

fix

If your project still uses `react-router-dom`, you must downgrade to `storybook-addon-remix-react-router@^3.0.0`. For newer projects using `react-router`, ensure all imports and usage conform to `react-router` conventions.

affects: >=4.0.0

breakingMajor versions of this addon are often tied to specific Storybook versions. v6 supports Storybook 10, v5 supports Storybook 9, v4 supports Storybook 8, and v3 supports Storybook 8. Using a mismatched addon version with your Storybook installation can lead to runtime errors or addon not loading.

fix

Always consult the compatibility table in the README and install the addon version that matches your Storybook major version (e.g., `npm i -D storybook-addon-remix-react-router@^6.0.0` for Storybook 10).

affects: >=3.0.0

gotchaIn version 4.0.1, a bug was fixed regarding an incorrect export path, which could lead to 'Module not found' errors, particularly when configuring the addon.

fix

Ensure you are using `storybook-addon-remix-react-router@^4.0.1` or newer to avoid this specific export path issue. Always keep packages updated to their latest patch versions.

affects: 4.0.0

gotchaThe `location.path` property in `reactRouterParameters` can be provided as a function. If this function returns a string, it is used 'as is', and it's the developer's responsibility to call `generatePath` from `react-router` if needed.

fix

When using `location.path` as a function that returns a string, explicitly use `generatePath` from `react-router` to construct dynamic paths if variables are involved, otherwise, the path may not resolve correctly.

affects: >=3.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-router-dom'

Attempting to use `storybook-addon-remix-react-router` v4 or higher while your project or stories still rely on `react-router-dom` imports or usage patterns.

fix

Upgrade your project to use `react-router` directly (and remove `react-router-dom`) or downgrade the addon to version `^3.0.0` if `react-router-dom` usage is required.

TypeError: Cannot read properties of undefined (reading 'reactRouter')

The `reactRouterParameters` object is either not properly set in `parameters.reactRouter` or `withRouter` decorator is missing.

fix

Ensure that `decorators: [withRouter]` is applied to your component's meta or story, and `parameters.reactRouter` is correctly defined using `reactRouterParameters({...})`.

TypeError: (0 , storybook_addon_remix_react_router__WEBPACK_IMPORTED_MODULE_2__.reactRouterParameters) is not a function

Incorrect import of `reactRouterParameters` (e.g., attempting a default import or a typo in the named import).

fix

Verify the import statement is `import { reactRouterParameters } from 'storybook-addon-remix-react-router';` (named import with correct casing).

Error: Storybook encountered an error during loading addons. It might be due to an incompatible addon version or a broken addon.

Mismatch between the addon's major version and your Storybook installation's major version.

fix

Check the addon's README for its compatibility table and install the version that specifically supports your Storybook major version (e.g., `storybook-addon-remix-react-router@^6.0.0` for Storybook 10).

Upgrade

Version history

6.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for Storybook and React components.

react-domrequiredPeer dependency for Storybook and React components.

react-routerrequiredCore routing library this addon integrates with.

storybookrequiredPeer dependency for the Storybook environment itself.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/JesusTheHun/storybook-addon-remix-react-router ↗

packagehttps://www.npmjs.com/package/storybook-addon-remix-react-router ↗