mizoguche.info

react-router v4でbrowserHistoryを使ったらCannot read property 'listen' of undefined

"react-router": "^4.1.1" "react-router-redux": "^4.0.8",で、

import { browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

// ...

const history = syncHistoryWithStore(browserHistory, store)

的な感じでbrowserHistoryを使ってたら下記のエラーが出た。

Cannot read property 'listen' of undefined

Cannot read property ‘listen’ of undefined · Issue #348 · reactjs/react-router-redux

history をインポートするか、バージョンを下げるかすると解決するっぽい。

で、reactjs/react-router-redux: Ruthlessly simple bindings to keep react-router and redux in syncのREADMEをよく見ると、

react-router-redux is going to live alongside react-router. In fact, it’s already set up over there. Go take a look!

This repo is for react-router-redux 4.x, which is only compatible with react-router 2.x and 3.x

reactjs/react-router-redux: Ruthlessly simple bindings to keep react-router and redux in sync

と書いてある。take a lookしてみると、

import createHistory from 'history/createBrowserHistory'

// ...


// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

// ...

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */ }
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/topics" component={Topics}/>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

react-router/packages/react-router-redux at master · ReactTraining/react-router

と、 history からインポートしてた。

そういえばreact-router v4で破壊的変更が入るという話を聞いた気がする。