时间戳

首页 > 解决方案 > React 中 Context API 和 Next js 路由之间的冲突

javascript - React 中 Context API 和 Next js 路由之间的冲突

问题描述

所以我只是按照 udemy 的 Material UI 教程进行操作，我在 Create React App 中设置了一个 Context API，并没有像教程中那样传递道具。后来我想用那个 Context API 迁移到 Next JS，现在我经常收到如下错误：

Error: Invariant failed: You should not use <Link> outside a <Router>

pages\_document.js (57:4) @ Object.ctx.renderPage

  55 | 
  56 |   ctx.renderPage = () =>
> 57 |     originalRenderPage({
     |    ^
  58 |       enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  59 |     });

这是我的 _app.js：

export default function MyApp(props) {
  const { Component, pageProps } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider theme={Theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />

        {/* This is the Context API Consumer */}
        <Navigation>
          <Component {...pageProps} />
        </Navigation>
      </ThemeProvider>
    </React.Fragment>
  );
}

该Navigation组件是上下文 API 使用者。

非常感谢任何帮助，因为我真的迷路了！

谢谢你。:)

编辑：我对 Next.js 很陌生

标签： javascriptreactjsnext.js

解决方案

再次重新评估我的网页文件后，我发现我忘记更改导致问题的to道具。href现在一切都很好。。

推荐阅读