CODEWITHSUNDEEP
javascriptreactjs
ChumiestBucket
ChumiestBucket

Reputation: 1073

You cannot render a <Router> inside another <Router> -- using React Router 6 with Storybook

I am understanding the error message, but not sure how I should handle it in this case. I believe that using the decorator below is causing the issue, but the decorator is needed to use the component with Storybook.

Here is the error message:

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

Believe this is due to the decorator and I can only assume the BrowserRouter found way upstream in my app, but from what I understand, Storybook isn't loading my index file. So I'm unsure how to proceed.

Here is the component, simplified:

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

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

Then, the Story:

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

Finally, the preview.js file:

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>
    )
];

Upvotes: 1

Views: 3170

Answers (1)

ChumiestBucket
ChumiestBucket

Reputation: 1073

Not sure why, but removing the decorators array from preview.js file and putting it only in the component Story file fixed this issue. Less than ideal but at least I am unblocked now

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

EDIT: see below comment - i was being silly with decorators

Upvotes: 1

Related Questions