Conflit between Context API and Next js Routing in React

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. Then later I wanted to migrate to Next JS with that Context API and now I am constantly getting errors like the one below:

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:

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.

Any help is much appreciated as I am really lost!

Thank You. :)

Edit: I am very new to 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. Now all is well..

Conflit between Context API and Next js Routing in React

Question

1 answers

solution1
0 2020-11-26 03:41:33

Conflit between Context API and Next js Routing in React

Question

1 answers

solution1 0 2020-11-26 03:41:33

solution1
0 2020-11-26 03:41:33