React + Redux + Storybook：在编写故事书故事时如何使用连接的 React 路由器的 useParams？

Question

我有一个反应组件，它id从路由中获取一个并使用它来加载一些数据并填充 redux 状态。

我正在使用useParams'react-router'来做到这一点。

import { useParams } from 'react-router'

import { usePreload } from './hooks'
import Display from './Display'

const Overview = () => {
  const { id } = useParams()
  const { data } = usePreload(id) // uses useEffect to preload the data with the given id

  return <Display data={data} />
}

export default Overview

我有故事

import Overview from './Overview'

import preloadData from './decorators/preloadData'

export default {
  title: 'Redux/scenes/Overview',
  decorators: [preloadData()],
  component: Overview,
  argTypes: {}
}

const Template = args => <Overview {...args} />

export const Default = Template.bind({})

该preloadData装饰很简单

import { usePreload } from '../hooks'
import { data } from './fixtures'

const Loaded = ({ children }) => {
  useSubmissionsPreload(data.id) // loads the site data into the state

  return <>{children}</>
}

const preloadData = () => Story => (
  <Loaded>
    <Story />
  </Loaded>
)

export default preloadData

代码在站点中实际运行时一切正常，但在故事中运行时，没有:id路径可供useParams选择。

现在我将跳过这个故事，只测试Display组件，但我的完成者要求知道如何让它工作。

Answer 1

我也遇到了这个问题，De2ev 的评论为我指明了正确的方向。然而它并不能直接工作，我必须做一些小小的改变。最后它与以下代码一起工作：

import React from "react";
import { Meta } from "@storybook/react";
import MyComponent from "./MyComponent";
import { MemoryRouter, Route} from "react-router-dom";

export default {
    title: "My Title",
    component: MyComponent,
    decorators: [(Story) => (
        <MemoryRouter initialEntries={["/path/58270ae9-c0ce-42e9-b0f6-f1e6fd924cf7"]}>
            <Route path="/path/:myId">
                <Story />
            </Route>
        </MemoryRouter>)],
} as Meta;

export const Default = () => <MyComponent />;