Storybook w/ react-router – You should not use outside

Here’s what worked for me:

1. Create a preview.js file in your .storybook folder.
2. Add the following global decorator in your preview.js file.

    import React from "react";
    import { addDecorator } from "@storybook/react";
    import { MemoryRouter } from "react-router";
    
    addDecorator(story => <MemoryRouter initialEntries={["https://stackoverflow.com/"]}>{story()}</MemoryRouter>);

Notes

• Storybook version used: "@storybook/react": "^5.3.13"
• Based on this solution here
• More about global decorators here

Edit: Update for Storybook V7 (Dec 2022)

1. Rename preview.js to preview.tsx (I guess it would work the same with jsx but my project is made in TypeScript)

2. addDecorator function is not available for v7 anymore so you need to add it like this.

import React from "react";
import { MemoryRouter } from "react-router";
    
export const decorators = [
  (Story) => (
    <MemoryRouter initialEntries={["https://stackoverflow.com/"]}>
      <Story />
    </MemoryRouter>
  ),
];