Storybook Addon Next Router

在您的 Storybook 故事中使用 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

作为故事中的装饰器

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
  })
];

如果您在 preview 中设置了 withNextRouter，则无需将其添加到每个故事的 decorators 键中，如果您有很多依赖于 Apollo 的故事，请考虑这样做。

阅读有关 next/router 可用选项的更多信息，请访问 https://nextjs.net.cn/docs/api-reference/next/router

示例应用

要查看如何使用此附加组件的实际用法，请查看示例应用

https://github.com/lifeiscontent/realworld