React 中 Context API 和 Next js 路由之间的冲突答案

【问题标题】：Conflit between Context API and Next js Routing in ReactReact 中 Context API 和 Next js 路由之间的冲突
【发布时间】：2021-03-07 21:16:25
【问题描述】：

所以我只是按照 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 很陌生

【问题讨论】：

Next.js 是您的应用程序和页面的黑盒，您必须遵循 Next.js 框架中自定义应用程序的规则。 nextjs.org/docs/advanced-features/custom-app
@XXLIVE，我尝试创建一个自定义应用程序并执行此操作，但它返回相同的错误:((
您能为此创建一个codesandbox 吗？
@XXLIVE，我解决了！感谢您的帮助:))

标签： javascript reactjs next.js

【解决方案1】：

再次重新评估我的网页文件时，我发现我忘记将导致问题的to 属性更改为href。现在一切都很好..

【讨论】：