React-router: Conflict with react-redux and won't update states.

[FateRiddle]

Version

4.0.0

Steps to reproduce

Index.js: (with proper react-redux setup)
ReactDOM.render( <Provider store={store} > <App /> </Provider>, document.getElementById('root') )
App.js
App = () => ( <BrowserRouter> <NavLink to='/about'>about</NavLink> </BrowserRouter> )
NavLink will work properly, show the active style when path matches.

BUT if you do it differently like this:
Index.js:
ReactDOM.render( <Provider store={store} > <BrowserRouter> <App /> <BrowserRouter> </Provider>, document.getElementById('root') )
App.js
App = () => ( <NavLink to='/about'>about</NavLink> )
NavLink won't be "active" when you click on. But will show the active style if you refresh the browser.

Why?

btw, I remember this one back when react-router v4 was in alpha. I understand there's react-router-redux, but I actually don't want to have redux store manage all the location as states, just want both library to work properly together.

[pshrmn]

Your connected component is blocking updates. Please see https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md for more details.

[FateRiddle]

@pshrmn
Hi, I've tried your method, but it somehow doesn't work, I wrote a small demo:
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux'
import  configureStore from './configureStore'
import { BrowserRouter as Router } from 'react-router-dom'

const store = configureStore()

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

App.js:

import React, { Component } from 'react'
import { NavLink,Route } from 'react-router-dom'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'

class App extends Component {
  render() {
    return (
        <div className="App">
          <Route component={Nav} />
        </div>
    )
  }
}

//App = connect()(withRouter(App))

const Nav = () => (
  <div>
    <NavLink exact to='/'>home</NavLink>
    <NavLink to='/node'>node</NavLink>
  </div>
)

export default App

This code works fine, but then if I add the commented-out line back, it doesn't work, why?

[pshrmn]

You have the HOCs flipped. If you do:

connect()(withRouter(App))

Your component tree is:

<connectWrapper> // this blocks
  <withRouter> // this prevents blocks
    <App />
  </withRouter>
</connectWrapper>

You want the location to be passed to the "connectWrapper", so you should do:

withRouter(connect()(App))

Resulting in the correct component tree:

<withRouter> // this prevents blocks
  <connectWrapper> // this blocks
    <App />
  </connectWrapper>
</withRouter>