{"id":12081,"library":"storybook-addon-remix-react-router","title":"Storybook Addon for Remix React Router","description":"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.","status":"active","version":"6.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/JesusTheHun/storybook-addon-remix-react-router","tags":["javascript","storybook","storybook-addon","remix","react","router","react-router","remix-react-router","typescript"],"install":[{"cmd":"npm install storybook-addon-remix-react-router","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-remix-react-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-remix-react-router","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Storybook and React components.","package":"react","optional":false},{"reason":"Peer dependency for Storybook and React components.","package":"react-dom","optional":false},{"reason":"Core routing library this addon integrates with.","package":"react-router","optional":false},{"reason":"Peer dependency for the Storybook environment itself.","package":"storybook","optional":false}],"imports":[{"note":"Primarily used in ESM contexts like .storybook/preview.ts. The CommonJS require syntax is generally incorrect for Storybook addon configuration.","wrong":"const { withRouter } = require('storybook-addon-remix-react-router');","symbol":"withRouter","correct":"import { withRouter } from 'storybook-addon-remix-react-router';"},{"note":"This is a named export. Attempting a default import will result in 'undefined' or a TypeError. Also, ensure correct casing.","wrong":"import reactRouterParameters from 'storybook-addon-remix-react-router';","symbol":"reactRouterParameters","correct":"import { reactRouterParameters } from 'storybook-addon-remix-react-router';"},{"note":"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.","symbol":"StorybookConfig","correct":"import type { StorybookConfig } from '@storybook/types';"}],"quickstart":{"code":"import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { Outlet, Link } from 'react-router-dom'; // Example component using router hooks\n\nconst UserProfile = () => (\n  <div>\n    <h1>User Profile Page</h1>\n    <p>Viewing profile for user ID: <Outlet /></p>\n    <nav>\n      <Link to=\"/users/42\">Profile</Link> | <Link to=\"/users/42?tab=activityLog\">Activity Log</Link>\n    </nav>\n  </div>\n);\n\nconst meta: Meta<typeof UserProfile> = {\n  title: 'User Profile',\n  component: UserProfile,\n  decorators: [withRouter],\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n        searchParams: { tab: 'profile' },\n        state: { fromPage: 'homePage' }\n      },\n      routing: { path: '/users/:userId' },\n    }),\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof UserProfile>;\n\nexport const Default: Story = {};\n\nexport const ActivityLogTab: Story = {\n  parameters: {\n    reactRouter: reactRouterParameters({\n      location: {\n        pathParams: { userId: '42' },\n        searchParams: { tab: 'activityLog' }\n      },\n      routing: { path: '/users/:userId' }\n    })\n  }\n};","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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).","message":"Major 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"In 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.","severity":"gotcha","affected_versions":"4.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Module not found: Can't resolve 'react-router-dom'"},{"fix":"Ensure that `decorators: [withRouter]` is applied to your component's meta or story, and `parameters.reactRouter` is correctly defined using `reactRouterParameters({...})`.","cause":"The `reactRouterParameters` object is either not properly set in `parameters.reactRouter` or `withRouter` decorator is missing.","error":"TypeError: Cannot read properties of undefined (reading 'reactRouter')"},{"fix":"Verify the import statement is `import { reactRouterParameters } from 'storybook-addon-remix-react-router';` (named import with correct casing).","cause":"Incorrect import of `reactRouterParameters` (e.g., attempting a default import or a typo in the named import).","error":"TypeError: (0 , storybook_addon_remix_react_router__WEBPACK_IMPORTED_MODULE_2__.reactRouterParameters) is not a function"},{"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).","cause":"Mismatch between the addon's major version and your Storybook installation's major version.","error":"Error: Storybook encountered an error during loading addons. It might be due to an incompatible addon version or a broken addon."}],"ecosystem":"npm"}