6

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!

goldylucks
  • 3,798
  • 3
  • 32
  • 34
  • maybe [this](https://stackoverflow.com/questions/64820799/react-and-antd-router-doesnt-re-render-components/64822114?noredirect=1#comment114608967_64822114) will help – lala Nov 15 '20 at 15:48

1 Answers1

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:

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

tmhao2005
  • 8,201
  • 2
  • 11
  • 22
  • I'm having a demo which is using the v4 working normally which using both `` and history api here https://codesandbox.io/s/agitated-dhawan-27f6d?file=/src/App.js. Can you check and compare things? It won't work as expected in case of switching to use v5 – tmhao2005 Nov 16 '20 at 11:13
  • Thank you for that, I also got another project in which everything is working. And I didn't find anything in the comparison. That's why I opened this bounty. As far as I can tell we don't have any differences – goldylucks Nov 16 '20 at 11:32
  • No, your demo would be what I would upload as a demo. what I'm looking for are things I might be missing in my own code. – goldylucks Nov 16 '20 at 11:38
  • that's very odd, I haven't made a single change and it's working now ... might be that the react router has downgraded it's history dep to version 4? I don't have history explicitly as a dep. anyway, thanks for your input! – goldylucks Nov 16 '20 at 11:42