Storybook 中的 React-Router 重定向

Posted 2023-02-19

【中文标题】Storybook 中的 React-Router 重定向

【英文标题】：React-Router Redirect in Storybook

【发布时间】：2021-11-24 02:02:42

【问题描述】：

我有一些组件在某些情况下使用重定向（来自 react-router-dom）。即使我用路由器装饰器包装我的故事，Storybook 似乎也不喜欢这样。有谁知道如何使 Storybook 与 Redirect 一起使用？

我最接近实现这一目标的方法是使用@storybook/addon-links，但到目前为止没有成功。我创建了一个存储库，我正在寻找的组件与 Landing.stories.jsx 和 Login.stories.jsx 相关

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

提前谢谢你和问候

【问题讨论】：

我有类似的问题，这对我有用：https://***.com/questions/58909666/storybook-w-react-router-you-should-not-use-link-outside-router

感谢@AlbertDugba 我已经使用了 MemoryRouter，但它不起作用。你可以在我放置的repo中看到

【参考方案1】：

我找到的解决方案是使用“Story Links Addon”，npm 包名“@storybook/addon-links”。

一旦安装完成，我会用一个内存路由器来包装我的故事，根据您要进行的重定向指定路由和路径。这样，一旦调用 Redirect，AutoLinkTo 也会被渲染，这是一个切换故事：

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

自动链接到：

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