Question

我一直在尝试使用Storybook中Next.js中的useRouter挂钩。但是，每次加载Storybook时，都会得到“无法读取null的属性'pathname'”。我该如何解决这个问题？

import { useRouter } from "next/router";

const NavStrip = () => {
  const router = useRouter();

  return (
    ...
            <Link href="/dashboard" passHref>
              <StyledLink active={router.pathname === "/dashboard"}>
                ...
              </StyledLink>
            </Link>
    ...
         )
}

NavStrip.stories.tsx

import React from "react";
import NavStrip from "./index";

export default {
  component: NavStrip,
  title: "NavStrip",
};

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

Answer 1

您应该使用 Storybook Addon Next Router。如 this answer 所述，您需要在 Next 中运行 Link，Storybook 不会加载 Next，因此该插件将为您模拟 Router。

在我的配置中，我需要做的就是：

// .storybook/preview.js
import { withNextRouter } from 'storybook-addon-next-router';

export const decorators = [withNextRouter()]

那应该可以解决它。

Answer 2

Storybook组件在Next环境之外和page组件之外运行，从而可以使用next/router。因此，您将无法在“下一页”及其子级之外使用此功能。

Next的路由器功能是在上下文API provider中创建的，因此，要使用useRouter，您的组件必须是该提供者的子组件（对于故事书，它永远不会成为提供者）。

如何在Storybook中使用NextJS的'useRouter（）'挂钩

2 个答案: