Storybook Next Router 插件
在您的 Storybook stories 中使用 Next.js 路由器。
这是 storybook-addon-next-router
库的一个分支。它解决了与 next v11.2+ 的兼容性问题。
版本
- 如果您正在使用 storybook 5.x,请使用
storybook-addon-next-router
1.x - 如果您正在使用 storybook 6.x,请使用
storybook-addon-next-router
2.x - 如果您正在使用 storybook 6.x 和 next 11.2+,请使用
@gogaille/storybook-addon-next-router
4.x
在 story 中作为装饰器
import { withNextRouter } from 'storybook-addon-next-router';
import MyComponentThatHasANextLink from '../component-that-has-a-next-link';
export default {
title: 'My Story',
decorators: [withNextRouter], // not necessary if defined in preview.js
};
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = () => <MyComponentThatHasANextLink />;
Example.story = {
parameters: {
nextRouter: {
path: '/profile/[id]',
asPath: '/profile/lifeiscontent',
query: {
id: 'lifeiscontent',
},
},
},
};
在 preview.js
中的用法
简单
import { withNextRouter } from 'storybook-addon-next-router';
export decorators = [
withNextRouter
];
自定义
import { withNextRouter } from 'storybook-addon-next-router';
export decorators = [
withNextRouter({
path: '/', // defaults to `/`
asPath: '/', // defaults to `/`
query: {}, // defaults to `{}`
push() {} // defaults to using addon actions integration, can override any method in the router
})
];
如果您在预览中设置了 withNextRouter
,则无需在每个 story 的 decorators
键中添加它,如果您的许多 story 依赖于 Apollo,请考虑这样做。
在 https://nextjs.net.cn/docs/api-reference/next/router 阅读更多关于 next/router 可用选项的信息
示例应用
查看示例应用,了解此插件在实际应用中的用法