next.js - 如何在 Storybook 中使用 NextJS 的 'useRouter()' 钩子(Hook)

Question

我一直在尝试在 Storybook 中使用 Next.js 中的 useRouter 钩子(Hook)。但是，每次加载 Storybook 时，我都会收到“无法读取 null 的属性“路径名””。我该如何解决这个问题？

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状态，你需要运行 Link在 Next 里面，Storybook 不会加载 Next，所以这个插件会模拟 Router为你。
在我的配置中，我需要做的就是:

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

export const decorators = [withNextRouter()]

那应该解决它。