javascript - Storybook StoryRouter 故事被标记为必需

Question

我将 React 与 Storybook 结合使用。我的一个组件使用 Link 并且 React 需要任何 Link 组件都应该包装在 Router 中，这就是我使用 npm 模块 StoryRouter 的原因。一切正常，但我在控制台上收到一个警报。

// simple ListItem.tsx
import React from 'react';
import { Link } from 'react-router-dom';
export const ListItem = () => {
    return (
        <Link to={{pathname:`/page/1`}}>
            go to page
        </Link>
    );
}

// ListItem.stories.tsx
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import { ListItem } from "./ListItem";
let props = {
    text:"Introduction to limits",
}
storiesOf("ListItem", module)
    .addDecorator(StoryRouter()) // this causes the alert
    .add("default", () => <ListItem {...props} />)

当我在 getStorybook 上查看组件时，控制台上有一条消息

    Warning: Failed prop type: The prop `story` is marked as required in `StoryRouter`, but its value is `undefined`.
        in StoryRouter (created by storyFn)
        in storyFn
        in ErrorBoundar

Answer 1

将 storybook-react-router 升级到 1.0.8。此错误已修复。请参阅:https://github.com/gvaldambrini/storybook-router/issues/43