NextRouter未安装,”出现在故事书中

bybem2ql 于 2023-02-12 发布在其他

关注(0)|答案(1)|浏览(141)

我用的是next13，所以我把故事书升级到了版本7。
然而，当我启动故事书时，我得到了next-route错误。
原因是我正在AppContext中使用Router，如果我注解掉Router部分，故事书就能工作。
我正在根据AppContext中的错误内容转换到屏幕。（使用路由器）。
误差

NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

import * as React from 'react';
import { initialize, mswDecorator } from 'msw-storybook-addon';

import { AppContextProvider } from '../src/context/AppContextProvider';
import { NextPageWithLayout } from '../src/pages/_app.page';
import {
  mockOrganization,
  mockList,
} from '../src/stories/mocks/msw-handlers';

import 'style/index.css';
import 'style/utils/slider.css';
import 'tailwindcss/tailwind.css';

initialize();

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  layout: 'fullscreen',
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  msw: {
    handlers: {
      '/organization': mockOrganization(),
      '/master': mockList(),
    },
  },
  chromatic: {
    viewports: [375, 768, 1200],
  },
};

export const decorators = [
  (Story: NextPageWithLayout) => {
    const getLayout = Story.getLayout ?? (page => page);

    return <AppContextProvider>{getLayout(<Story />)}</AppContextProvider>;
  },
  mswDecorator,
];

next.js

来源：https://stackoverflow.com/questions/75405826/nextrouter-was-not-mounted-occurs-in-storybook

1条答案

按热度按时间

xxhby3vn1#

确保路由器已正确初始化并安装在Storybook设置中

import * as React from 'react';
import { Router } from 'next/router';
import { initialize, mswDecorator } from 'msw-storybook-addon';

import { AppContextProvider } from '../src/context/AppContextProvider';
import { NextPageWithLayout } from '../src/pages/_app.page';
import {
  mockOrganization,
  mockList,
} from '../src/stories/mocks/msw-handlers';

import 'style/index.css';
import 'style/utils/slider.css';
import 'tailwindcss/tailwind.css';

initialize();

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  layout: 'fullscreen',
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  msw: {
    handlers: {
      '/organization': mockOrganization(),
      '/master': mockList(),
    },
  },
  chromatic: {
    viewports: [375, 768, 1200],
  },
};

const RouterDecorator = (Story: NextPageWithLayout) => {
  const [isRouterReady, setIsRouterReady] = React.useState(false);
  React.useEffect(() => {
    Router.ready(() => {
      setIsRouterReady(true);
    });
  }, []);

  const getLayout = Story.getLayout ?? (page => page);

  return (
    <React.Fragment>
      {isRouterReady && (
        <AppContextProvider>
          {getLayout(<Story />)}
        </AppContextProvider>
      )}
    </React.Fragment>
  );
};

export const decorators = [RouterDecorator, mswDecorator];

赞(0）回复(0）举报 2023-02-12

我来回答

NextRouter未安装,”出现在故事书中

1条答案

相关问题

热门标签

最新问答