Storybook 5.2 (CSF) - 如何添加 react-router-dom 链接 - “你不应该在 <Router> 之外使用 <Link>”答案

【问题标题】：Storybook 5.2 (CSF) - How to add react-router-dom Link - "You should not use <Link> outside a <Router>"Storybook 5.2 (CSF) - 如何添加 react-router-dom 链接 - “你不应该在 <Router> 之外使用 <Link>”
【发布时间】：2019-11-25 18:20:57
【问题描述】：

我的故事中有一个错误，因为我的组件正在使用<Link to="/" />。据我所知，该链接在故事中没有上下文，因此我需要添加一个装饰器，但是大多数描述这一点的文章都没有使用组件故事格式 (CSF)。

任何想法如何在全局范围内或直接进入故事？

Error: Invariant failed: You should not use <Link> outside a <Router>

这是我的故事文件。

// ./stories.tsx.tsx
import React from 'react'
import { LinkComponent } from '.'
import { StoryRouter } from 'storybook-react-router'

export default {
  title: 'LinkComponent'
}

export const base = () => {
  return <LinkComponent/>
}

这是我的组件：

// ./LinkComponent.tsx
import React from 'react'
import { Link } from 'react-router-dom'

const LinkComponent = () => {
  return (
    <section className="links">
       <Link to="/">Home</Link>
    </section>
  )
}

我已经按照很多人的建议在故事书配置中全局尝试了addDecorator(StoryRouter());，但它破坏了代码。

// /.storybook/config.ts
import StoryRouter from 'storybook-react-router';

addDecorator(StoryRouter());
configure(require.context('../src', true, /stories\.tsx$/), module)

【问题讨论】：

标签： javascript reactjs react-router-dom storybook

【解决方案1】：

全脸掌时刻！！

没有理由添加装饰器。您可以简单地在<MemoryRouter/> 中导入和包装您的组件来模拟链接的上下文。

// ./stories.tsx
import React from 'react'
import { LinkComponent } from '.'
import { MemoryRouter } from 'react-router-dom'

export default {
  title: 'LinkComponent'
}

export const base = () => {
  return (
    <MemoryRouter>
      <LinkComponent/>
    </MemoryRouter>
}

而且...鲍勃是你的叔叔（我没有一个叫鲍勃的叔叔！？！）！

【讨论】：