时间戳

首页 > 解决方案 > Storybook 中的 React-Router 重定向

reactjs - Storybook 中的 React-Router 重定向

问题描述

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

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

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

预先感谢您和问候

标签： reactjsreact-routerreact-router-domstorybook

解决方案

我找到的解决方案是使用“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;
}

推荐阅读