React-Router Redirect in Storybook

Question

I have some components that use Redirect (from react-router-dom) in certain scenarios. It seems that Storybook does not like this even though I wrap my story with a router decorator. Does anyone know how to make Storybook work with Redirect?

The closest thing I have been to achieve this is to use @storybook/addon-links but no success so far. I have created a repository, the components I am looking for are related to Landing.stories.jsx and Login.stories.jsx

https://github.com/javierguzman/storybook-addon-links

Thank you in advance and regards

I had similar issue and this worked for me: [https://stackoverflow.com/questions/58909666/storybook-w-react-router-you-should-not-use-link-outside-router](https://stackoverflow.com/questions/58909666/storybook-w-react-router-you-should-not-use-link-outside-router) — Albert Dugba, Oct 03 '21 at 10:59
Thanks @AlbertDugba I use already a MemoryRouter and it does not work. You can see that in the repo I placed — Javier Guzmán, Oct 03 '21 at 12:29

score 1 · Accepted Answer · answered Oct 12 '21 at 16:22

The solution I found is to use "Story Links Addon", npm package name "@storybook/addon-links".

Once it is installed, I wrap my story with a memory router, specifying route and path according to the Redirect you want to make. In this way, once Redirect is called, AutoLinkTo gets rendered as well, which is the one switching stories:

     <MemoryRouter initialEntries={[encodeURI(route)]}>
        <Route path={path}>
          <AutoLinkTo kind={redirectComponent} story={redirectStory} />
        </Route>
      </MemoryRouter>

Being AutoLinkTo:


const AutoLinkTo = ({ kind, story }) => {
  React.useEffect(() => {
    linkTo(kind, story)();
  })
  return null;
}

React-Router Redirect in Storybook

1 Answers1