Storybook 中的 React-Router 重定向

Question

我有一些組件在某些情況下使用重定向（來自 react-router-dom）。 盡管我用路由器裝飾器包裝了我的故事，但 Storybook 似乎不喜歡這樣。 有誰知道如何使 Storybook 與 Redirect 一起工作？

我最接近實現這一目標的是使用@storybook/addon-links，但到目前為止還沒有成功。 我已經創建了一個存儲庫，我正在尋找的組件與 Landing.stories.jsx 和 Login.stories.jsx 相關

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

提前致謝並問候

Answer 1

我找到的解決方案是使用“故事鏈接插件”，npm 包名稱“@storybook/addon-links”。

安裝后，我用內存路由器包裝我的故事，根據您要進行的重定向指定路由和路徑。 這樣，一旦 Redirect 被調用，AutoLinkTo 也會被渲染，這是一個切換故事：

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

成為 AutoLinkTo：

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