我一直在尝试在Storybook中使用Next.js的useRouter钩子。然而,每次我加载Storybook时,我都会得到'cannot read property 'pathname' of 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 />;
4条答案
按热度按时间ht4b089n1#
你应该使用Storybook Addon Next Router。正如this answer所述,您需要在Next中运行
Link
,而Storybook不会加载Next,因此此插件将模拟Router
。在我的配置中,我需要做的就是:
这应该可以解决了。
uqjltbpv2#
storybook-addon-next-router的设置有一点变化。
对于版本3.x:
将插件添加到
.storybook/main.js
中的配置:将RouterContext.Provider添加到
.storybook/preview.js
:还有其他的选择(例如:自定义Next路由器提供的功能)。参见the documentation。
ttvkxqim3#
Storybook组件在Next环境和
page
组件(支持使用next/router
)之外运行。因此,您将无法在您的Next页面及其子页面之外使用它。Next的路由器功能是在Context API提供者中创建的,因此为了使用
useRouter
,您的组件必须是该提供者的子组件(在故事书的情况下,它永远不会是)。cetgtptt4#
您不再需要使用上一个答案中提到的
storybook-addon-next-router
包。您现在可以集成Next.js并自动使用Next router。参见docs here。