故事书5.2（CSF）-如何添加react-router-dom链接-“您不应在<Router>之外使用<Link>”

Question

我的故事出现错误，因为我的组件正在使用<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)

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

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