React 中上下文 API 和 Next js 路由之间的冲突

Question

So I was just following along a tutorial for Material UI from udemy, and I set up a Context API in Create React App and didn't pass down props like in the tutorial.所以我只是在学习 udemy 的 Material UI 教程，我在 Create React App 中设置了一个 Context API，并没有像教程中那样传递道具。 Then later I wanted to migrate to Next JS with that Context API and now I am constantly getting errors like the one below:后来我想使用该 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 |     });

Here is my _app.js:这是我的 _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>
  );
}

The Navigation component is the Context API Consumer. Navigation组件是 Context API Consumer。

Any help is much appreciated as I am really lost!非常感谢任何帮助，因为我真的很迷茫！

Thank You.谢谢你。 :) :)

Edit: I am very new to Next.js编辑：我对 Next.js 很陌生

Answer 1

Upon re-evaluating my webpage files again, I found out that I forgot to change the to prop to href which was causing the problem.再次重新评估我的网页文件后，我发现我忘记将导致问题的to prop 更改为href 。 Now all is well..现在一切都很好..

React 中上下文 API 和 Next js 路由之间的冲突

问题描述

1 个解决方案

解决方案1
0 2020-11-26 03:41:33

React 中上下文 API 和 Next js 路由之间的冲突

问题描述

1 个解决方案

解决方案1 0 2020-11-26 03:41:33

解决方案1
0 2020-11-26 03:41:33