StoryBook反应钩

Question

所以我在我的代码中使用了useLocation钩子，而且我对故事书很陌生，我无法在我的代码中找到初始化这个钩子的方法：

let location = useLocation();

const parsedLocation = new URLSearchParams(location.search)
const query = parsedLocation.get('query')
const {articles, status} = useSearch(query, 50)

故事书中的

const Template = (args) => <Page {...args} />;

export const Primary = Template.bind({});
 Primary.args = {
   location: useLocation()
};

//它显示了无法读取未定义属性“位置”的错误

Answer 1

将useLocation();移动到容器组件，在其中收集所有数据并处理事件。将query作为道具传递给子组件。

在Storybook中，使用模拟数据构建此组件。故事书更多地用于开发组件的UI部分。要使用useLocation()钩子进行测试，可以使用单元测试。

如果您需要模拟组件的某个URL位置，请考虑使用MemoryRouter https://reactrouter.com/web/api/MemoryRouter