Invariant failed when attempting to include react router in a next js app

Viewed 23

I am migrating a react app to also use next js, and when compiling it gives me "Error: Invariant failed". It looks like BrowserRouter is causing the issue:

// pages/some_nextjs_page.jsx
import {
  Switch, Route, BrowserRouter as Router,
} from 'react-router-dom'
const Page = () => {
  return <Router>
    <Switch>
      <Route path="/" component={MySimpleComponent} />
    </Switch>
  </Router>
}

I've read nextjs docs and they recommend to "uninstall" and not use react-router-dom. However, I'd like to continue using it if possible. A lot of my components depend on useHistory and replacing react router with nextjs router doesn't seem like a good idea.

There seems to be no issue using react router from nextjs if its in pages/[[...app]].js, so how can I use it in pages that I explicitly define?

0 Answers
Related