如何在 Storybook 中使用 NextJS 的 'useRouter()' 钩子

Posted 2023-02-19

【中文标题】如何在 Storybook 中使用 NextJS 的 \'useRouter()\' 钩子

【英文标题】：How to use NextJS's 'useRouter()' hook inside Storybook如何在 Storybook 中使用 NextJS 的 'useRouter()' 钩子

【发布时间】：2020-09-20 02:53:16

【问题描述】：

我一直在尝试在 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 />;

【参考方案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()]

这应该可以解决它。

【参考方案2】：

Storybook 组件在 Next 环境和 page 组件之外运行，该组件允许使用 next/router。因此，您将无法在下一页及其子页面之外使用它。

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