React Router or Link Not Rendered

The above post by Dane has the solution. But in the spirit of presenting the solution with more clarity, I will copy and paste the relevant codes that made react router work well with redux and other middleware.

import { withRouter } from 'react-router-dom'



export default withRouter(connect(
  mapStateToProps,
)(App))

From React Router docs,

Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component that doesn’t update when the location changes (child routes or active nav links don’t update). This happens if:

1. The component is connected to redux via connect()(Comp).
2. The component is not a “route component”, meaning it is not rendered like so: <Route component={SomeConnectedThing}/>

The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

So maybe it's a problem with using render props. So:

1. either replace render with component, or
2. try their solution, with withRouter ( even there you have to make them into components )

https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates

In my case, this is working properly. If you will import router and link both together.

import { BrowserRouter as Router, Link } from "react-router-dom";