Storybook w/ react-router - You should not use <Link> outside <Router>

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={['/']}>{story()}</MemoryRouter>);

Notes

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

This is what worked for me. Add in the Memory Router inside the decorators property.

import React from 'react';
import {MemoryRouter} from 'react-router-dom';
import //your component// from //component location//

export default {
title : //How you want your component to show in storybook eg: 'Components/Button'
component : //Specify the name of component that you imported eg: 'Button'
decorators : [(Story) => (<MemoryRouter><Story/></MemoryRouter>)] //Wrapping the story inside the router
};

For version 6.1 of Storybook works storybook-router in the new code notation. Here is an example for a single component:

import React from 'react';
import StoryRouter from 'storybook-react-router';
import //your component// from //component location//

export default {
  title: '//your component//',
  component: //your component//,
  decorators: [StoryRouter()],
};

export const Name = () => <//your component// />;