Components not changing when URL is changed or back button is pressed

[rrtheonlyone]

Dear all,

I am facing an issue where changing my URL (or pressing back button on browser) does not have any affect on my components. I am using react-router-redux (version ^5) and react-router (version ^4).

My configuration is as follows:

1. Create history in index.js

import createHistory from 'history/createBrowserHistory'
const history = createHistory()

2. Set-up middleware with the history and pass it down to Layout using Router (All my routes are defined within the Layout component itself)

<Router history={history}>
      <Layout />
</Router>

3. Dispatch a push from react-router-redux to change the url/component when a user clicks something on the side NavBar

const mapDispatchToProps = (dispatch) => {
    return {
        actions: {
            toggleNavTree: () => dispatch(toggleNavTree()),
            selectNavTreeEntry: (id) => {
                dispatch(push(id))
                dispatch(selectNavTreeEntry(id))
            },
            hideInfoPanel: () => dispatch(hideInfoPanel()),
        },
    }
}

However, what happens is that the url only changes when you click something on the NavBar. Changing the URL by yourself does not change anything (or pressing back button). I have researched this online and also set-up withRouter when connecting my container to my components but it did not help.

import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Layout))

Could this be an issue with regards to react-router-redux? Is there proper integration with react-router? I have removed react-router-redux completely and I can get URL navigation working again.

Would appreciate any help on this.

Thanks,
Rahul

[timdorr]

You have to use withRouter(). If it's not working, then something else is blocking your updates.
See this guide: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md