React router v5 with history - no content shown on routing

Question

I'm banging my head for what I'm missing here. My routing worked fine as long as I used BrowserRouter:

import { BrowserRouter as Router } from 'react-router-dom'

But now I want to navigate programmatically outside my components (in a saga) and for that I switched to Router with history

// history.js
import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
export default history

// index.js
import { Router } from 'react-router-dom'
import history from './app/history'

  ReactDOM.render(
    <Provider store={store}>
      <ThemeProvider>
        <Router history={history}>
          <Component />
        </Router>
      </ThemeProvider>
    </Provider>,
    document.getElementById('root')
  )

And now when I hit refresh I see the content of the route, but if I try to navigate with either history or by clicking a Link, no route is getting rendered, just the url changes.

What am I missing?

I also tried import { Router } from 'react-router' and it didn't work.

Thanks in advance!

Answer 1

It looks like many people have been discussing about this issue which is using the history latest version >=5 causing this issue.

It seems to be working normally with 4.x version such as 4.10.1 so you might need to downgrade history version to make it work for now.

{
  "history": "4.10.1",
}

Here are the open issues:

• https://github.com/ReactTraining/history/issues/803
• https://github.com/ReactTraining/history/issues/804
• https://github.com/ReactTraining/history/issues/805

I'm guessing there are people working on the fix. Let's see then we would update again.