React Router 6搭配Storybook出现嵌套Router报错该如何解决

你遇到的嵌套Router报错完全是重复配置路由装饰器导致的，和项目入口的BrowserRouter无关：

• 你在.storybook/preview.js的全局装饰器配置中，已经给所有Story默认包裹了一层<MemoryRouter>
• 同时在单个组件的Story配置里，又额外加了一层<MemoryRouter>装饰器，两层Router嵌套触发了react-router的规则校验

1. 删掉单个Story配置中重复的<MemoryRouter>装饰器即可，全局已经配置的装饰器会自动生效，不需要重复添加
   修改后的Story配置参考：

import { Story, Meta } from '@storybook/react';

import { Component } from '..';

export default {
  title: 'Province',
  component: Component,
  // 删掉原来此处的重复MemoryRouter装饰器
} as Meta;

// 注意你原代码里此处写的组件名是IntakeQuestionnaire，和导入的Component不一致属于笔误，要改成对应组件名
const Template: Story = (args) => <Component {...args} />;

export const Province = Template.bind({});
Province.parameters = {};
Province.args = {};

2. 如果你需要给当前组件的Story指定特定初始路由，不需要额外加Router，直接修改全局的preview.js装饰器，支持从Story参数读取路由配置即可，参考修改：

// preview.js 装饰器修改示例
export const decorators = [
  (Story, context) => {
    // 支持单个story自定义路由参数
    const initialEntries = context.parameters?.reactRouter?.initialEntries || ['/'];
    return (
      <MemoryRouter initialEntries={initialEntries}>
        <Story />
      </MemoryRouter>
    )
  }
];

配置后如果需要给当前Story指定跳转到/screening路径，只需加一行参数配置即可：

Province.parameters = {
  reactRouter: {
    initialEntries: ['/screening']
  }
};

如果你不想给所有Story都默认加路由，也可以反过来删除preview.js里的全局MemoryRouter装饰器，只在需要用到路由的Story中单独配置即可，效果相同。

内容的提问来源于stack exchange，提问作者ChumiestBucket