时间戳

首页 > 解决方案 > Storybook w/ react-router - 你不应该在外面使用

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

问题描述

发布问题的解决方案我很难找到尽管 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)

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

标签： javascriptreactjsreact-routerstorybook

解决方案

这对我有用：

  1. preview.js在您的文件夹中创建一个文件.storybook。
  2. 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
  • 更多关于全局装饰器的信息在这里

推荐阅读