Storybook с react-router: Не используйте <Link> вне <Router>

Вот что сработало для меня. Добавьте MemoryRouter в свойство decorators.

import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import //ваш компонент// из //местоположение компонента//

export default {
  title: //Как вы хотите, чтобы ваш компонент отображался в Storybook, например: 'Компоненты/Кнопка'
  component: //Укажите имя компонента, который вы импортировали, например: 'Кнопка'
  decorators: [(Story) => (<MemoryRouter><Story/></MemoryRouter>)] // Оборачиваем историю в роутер
};

Этот код позволит вашему компоненту правильно работать с маршрутизацией в Storybook.

В дополнение к ответу Web-ski, добавьте StoryRouter в ваш файл .storybook/preview.js:

import StoryRouter from 'storybook-react-router';

addDecorator(StoryRouter());

Теперь он будет доступен глобально в каждой истории.

Если вы хотите сделать это для отдельного компонента, а не глобально, то в файле историй оберните компонент в MemoryRouter.

Например, у меня есть компонент заголовка, который содержит элемент Link, поэтому в файле header.stories.tsx я изменю следующее:

const Template: ComponentStory<typeof Header> = (args) => (
    <Header {...args} />
);

на

const Template: ComponentStory<typeof Header> = (args) => (
  <MemoryRouter>
    <Header {...args} />
  </MemoryRouter>
);

Таким образом, вы сможете корректно использовать компонент Link внутри вашего заголовка в среде Storybook.