您不能在另一个内渲染——使用React Router 6和Storybook

Question

我理解错误消息，但不确定在这种情况下应该如何处理它。我相信使用下面的decorator会导致这个问题，但是decorator需要在Storybook中使用组件。

以下是错误消息：

You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

相信这是由于装饰，我只能假设BrowserRouter在我的应用程序上游找到，但据我所知，Storybook没有加载我的索引文件。所以我不确定如何继续。

以下是简化的组件：

export const Component = () => {
  ...

  return (
    <Routes>
          <Route path="/screening" element={<Screening {...propBag} />} />
        </Routes>
  );
};

然后，故事：

import { Story, Meta } from '@storybook/react';
import { MemoryRouter } from 'react-router-dom';

import { Component } from '..';

export default {
  title: 'Province',
  component: Component,
  decorators: [
    (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    )
  ],
} as Meta;

const Template: Story = (args) => <IntakeQuestionnaire {...args} />;

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

最后，预览。js文件：

import 'tailwindcss/tailwind.css';
import { MockedProvider } from '@apollo/client/testing';

import { i18n } from './i18next';

export const parameters = {
  i18n,
  locale: 'en',
  locales: {
    en: 'English',
    fr: 'Français',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  apolloClient: { MockedProvider },
};

export const decorators = [
  (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    )
];

Answer 1

不确定原因，但正在从预览中删除装饰器数组。js文件并将其仅放在组件故事文件中修复了此问题。虽然不太理想，但至少我现在已经畅通无阻了

export default {
  title: 'Province',
  component: Component,
  decorators: [
    (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    )
  ],
} as Meta;