javascript - Storybook w/react-router - 你不应该在 之外使用

Question

发布问题的解决方案我很难找到尽管 Sensei 谷歌搜索技能
尽管我的带有 react-router 的应用程序可以正常工作，但 Storybook 抛出了错误“不变式失败:您不应该在外部使用”。

Error: Invariant failed: You should not use <Link> outside a <Router>
    at invariant (tiny-invariant.esm.js:11)
    at react-router-dom.js:181
    at updateContextConsumer (react-dom.development.js:19747)
    at beginWork$1 (react-dom.development.js:20079)
    at HTMLUnknownElement.callCallback (react-dom.development.js:358)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:410)
    at invokeGuardedCallback (react-dom.development.js:463)
    at beginWork$$1 (react-dom.development.js:25730)
    at performUnitOfWork (react-dom.development.js:24631)
    at workLoopSync (react-dom.development.js:24613)

奇怪，因为应用程序工作(因此没有在外面使用)。

Answer 1

这对我有用:

创建 preview.js文件在您的.storybook文件夹。

在您的 preview.js 中添加以下全局装饰器文件。

    import React from "react";
    import { addDecorator } from "@storybook/react";
    import { MemoryRouter } from "react-router";
    
    addDecorator(story => <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>);

备注

使用的故事书版本:"@storybook/react": "^5.3.13"

基于此解决方案here

更多关于全局装饰器here