следующий / маршрутизатор: Невозможно прочитать свойство pathname со значением null (сборник рассказов)

Question

У меня есть приложение, которое использует 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 

Пример использования 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(), я получаю ноль, что странно. Что я здесь делаю не так?

Answer 1

Вы можете имитировать поведение следующего маршрутизатора, используя пакет storybook-addon-next-router. Использование этого пакета не только заставит маршрутизатор работать, но также даст вам возможность настраивать значения маршрутизатора для каждой истории.

      // .storybook/main.js
module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-next-router",
  ],
};

Answer 2

Я столкнулся с той же проблемой при обновлении до Next v9.5. Похоже, чтоLink Компонент предполагает наличие следующего маршрутизатора.

Этот PR, кажется, решает проблему. Обновление до версии v9.5.1-canary.1 решило эту проблему.