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

Answer 1

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