React-router: withRouter not working if inside redux connect

[alzalabany]

Thank you for great library

Steps to reproduce

1. create-react-app bug
2. cd bug
3. yarn add react-router react-redux redux
4. yarn start
5. open index.js and add

const App = () => <Router>
<Swtich>
  <route path="/a' component={()=><Link to="/b"}>B</Link>} />
  <route  component={()=><Link to="/a"}>A</Link>} />
</Switch>
<Router>
export const AppContainer =  connect(state, props)(withRouter(App));
ReactDOM.render(
      <Provider store={store}>
        <Router>
          <AppContainer store={store} />
        </Router>
      </Provider>,
    rootEl
  );

1. run application, click on any link the address bar will change but route will not change

2. edit index.js replace

   // export const AppContainer =  connect(state, props)(withRouter(App));
   //with
   export const AppContainer =  withRouter(connect(state, props)(App));
   

now every thing will work as expected.

Version

4.0.0

Expected Behavior

withRoute should work regardless of HOC

[timdorr]

You have your withRouter and connect in the wrong order: https://reacttraining.com/react-router/core/api/Prompt

[alzalabany]

yp, thats the issue, it shouldn't be (order sensetive)

[thomassuckow]

It should be a real component and force update. Then in react 16 it wouldn't even have to make an element.

[Fercho191]

I think it has to do with this