以下是对我有效的方法：
1.在.storybook文件夹中创建一个preview.js文件。
1.在您的preview.js文件中添加以下全局装饰器。

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

备注

• 使用的故事书版本："@storybook/react": "^5.3.13"
• 基于这个解决方案
• 有关全局装饰器here的更多信息
  编辑：故事书V7更新（2022年12月）

1.将preview.js重命名为preview.tsx（我想它在jsx中也会起作用，但我的项目是用TypeScript制作的）

1. addDecorator函数不再适用于v7，因此您需要像这样添加它。

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

这对我来说是有效的。在装饰器属性中添加内存路由器。

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
};

对于Storybook 6.1版，storybook-router在新代码表示法中工作。以下是单个组件的示例：

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// />;

Web-ski的答案是：将StoryRouter添加到您的.storybook/preview.js中

import StoryRouter from 'storybook-react-router';

addDecorator(StoryRouter());

它现在在全球各地的每个故事中都可以使用。

如果您想对单个组件执行此操作，而不是全局执行此操作，那么在story文件中，将组件 Package 在内存路由器中。
例如，我有一个包含Link元素的header组件，因此在我的header.stories.tsx文件中，我将更改以下内容：

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

至

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

问题是Storybook渲染单个故事。在本例中，使用<Link>的组件实际上在<Router>之外渲染。
解决方案是使用addDecorator用<Router> Package 各个故事;

//config.js
//...
addDecorator(story => <Router>{story()}</Router>);

如果您还想使用路由路径参数，您将需要使用故事书装饰器。用户Web-ski和sidonaldson已经展示了如何将路由器模拟添加到故事书中。
下面是我在react v18中实现的故事书路由器模拟

预览.js文件

import { withRouter } from "storybook-addon-react-router-v6";

export const decorators = [withRouter];

组件. story.js文件

import Component from "./component";

export default {
  component: Component,
  title: "component with rout path and parameters",
  parameters: {
    reactRouter: {
      routePath: "/root/:primary/:secondary",
      routeParams: { primary: "firstparam", secondary: "secondparam" },
    },
  },
};

const Template = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.args = {
// ommited
};

这将为useParams之类的函数提供以下结果：

const {primary, secondary} = useParams();
console.log('primary value: ' + primary)
console.log('secondary value: ' + secondary)
// outputs: primary value: firstparam
// outputs: secondary value: secondparam