Entiendo el mensaje de error, pero no estoy seguro de cómo debo manejarlo en este caso. Creo que usar el decorador a continuación está causando el problema, pero se necesita el decorador para usar el componente con Storybook.

Aquí está el mensaje de error:

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

Creo que esto se debe al decorador y solo puedo suponer que el BrowserRouter se encontró aguas arriba en mi aplicación, pero por lo que entiendo, Storybook no está cargando mi archivo de índice. Así que no estoy seguro de cómo proceder.

Aquí está el componente, simplificado:

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

Luego, la historia:

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

Finalmente, el archivo preview.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[AZ].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, }, apolloClient: { MockedProvider }, }; export const decorators = [ (Story) => ( <MemoryRouter> <Story /> </MemoryRouter> ) ];