3

我有一个使用 Next.js 和 MaterialUI 的应用程序。为了让 Link 组件与 MaterialUI 一起正常工作，我有一个特殊的Link组件，如下所示：

function Link(props) {
  const {
    href,
    activeClassName = 'active',
    className: classNameProps,
    innerRef,
    naked,
    prefetch,
    ...other
  } = props;

  const router = useRouter();
  const pathname = typeof href === 'string' ? href : href.pathname;
  const className = clsx(classNameProps, {
    [activeClassName]: router.pathname === pathname && activeClassName
  });

  if (naked) {
    return (
      <NextComposed
        className={className}
        ref={innerRef}
        href={href}
        prefetch={prefetch}
        {...other}
      />
    );
  }

  return (
    <MuiLink component={NextComposed} className={className} ref={innerRef} href={href} {...other} />
  );
}

当我需要它时，这绝对可以正常工作。但是，当我开始将组件（使用此链接）添加到 Storybook 时，出现错误：

Uncaught TypeError: Cannot read property 'pathname' of null
        at Link

我添加到 Storybook 的组件中的链接使用示例：

const MyComponent = (props) => (<Button
                    className={classes.loginButton}
                    disableRipple
                    edge="end"
                    variant="contained"
                    color="secondary"
                    component={Link}
                    naked
                    href="/login"
                  >
                    Login
                  </Button>)

当我尝试使用 console.log() 路由器时，我确实得到了 null，这很奇怪。我在这里做错了什么？

4

2 回答 2

0

升级到 Next v9.5 时，我遇到了同样的问题。看起来该Link组件假定 Next 路由器将存在。

这个 PR似乎解决了这个问题。升级到v9.5.1-canary.1 版本为我解决了这个问题。

于 2020-07-29T23:45:58.207 回答
0

您可以使用包storybook-addon-next-router来模拟下一个路由器的行为。使用此软件包不仅可以使路由器正常工作，而且还可以让您根据每个故事自定义路由器值。

// .storybook/main.js
module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-next-router",
  ],
};
于 2022-01-18T06:12:07.580 回答