Storybook 中的 React-Router 重定向

Question

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

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

有关

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

提前致谢并问候

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

Storybook 中的 React-Router 重定向

React-Router Redirect in Storybook

reactjs

react-router

react-router-dom

storybook