react-router-redux：无法在syncHistoryWithStore读取未定义的属性'listen'答案

【问题标题】：react-router-redux: Cannot read property 'listen' of undefined at syncHistoryWithStorereact-router-redux：无法在syncHistoryWithStore读取未定义的属性'listen'
【发布时间】：2017-03-02 09:54:06
【问题描述】：

我正在将干净的 Ract 应用程序重构为 Redux。我已经定义了一些动作和减速器测试。我在路由器和历史上获得了堆栈。
我收到错误：

Uncaught TypeError: Cannot read property 'listen' of undefined at syncHistoryWithStore

从简单的代码：

    //configureStore.jsx
    import redux from 'redux';
    import {buildingReducer, levelReducer, roomReducer} from 'reducers';
    import {routerReducer} from 'react-router-redux';

    export let configure = (initialState = {}) => {
        let reducer = redux.combineReducers({
            building: buildingReducer,
            level: levelReducer,
            room: roomReducer,
            routing: routerReducer
       });

       let store = redux.createStore(reducer, initialState, redux.compose(
        window.devToolsExtension ? window.devToolsExtension() : f => f));

       return store;

    };

    //app.jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
    import {Provider} from 'react-redux';
    import {syncHistoryWithStore} from 'react-router-redux'

    var actions = require('actions');
    var store = require('configureStore').configure();

    const history = syncHistoryWithStore(browserHistory, store);

    ReactDOM.render(
      <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={Main}>
                <IndexRoute component={Map}/>
                <Route path="report" component={Report}/>
                <Route path="about" component={About}/>
            </Route>
        </Router>
      </Provider>,
     document.getElementById('react_app')
    );

我不知道为什么会发生这种情况:(

【问题讨论】：

我遇到了同样的问题。你搞清楚了吗？
我确实将软件包降级到版本："react": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.0", "react-router-redux": "^4.0.0",

标签： react-router-redux

【解决方案1】：

我通过关注comment 解决了这个问题。这是在我更新为“react-router”：“^4.1.1”和“react-router-redux”：“^4.0.8”之后。这确实解决了使用 react-router 中的 browserHistory 的问题，但可以解决您的问题。

解决方法需要您：

import { createBrowserHistory } from 'history';
const history = syncHistoryWithStore(createBrowserHistory(), store);

关于这个问题的 cmets 似乎建议尝试 2 个插头的不同组合。我通过安装 "react-router": "^3.0.2" 和 "react-router-redux": "^4.0.8" 测试了代码，这也有效。

【讨论】：

这应该是公认的答案。专门为我工作的反应路由器^4。
哇，它与 "react-router": "^4.2.0", "react-router-redux": "^4.0.8" 完美搭配

【解决方案2】：

我正在处理一个 react_on_rails 项目。我解决了降级到以下版本的问题。

"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",

【讨论】：

【解决方案3】：

我没有看到您编码的问题。它适用于我的这种组合： "react-router": "^3.0.2", "react-router-redux": "^4.0.8"

问题的一个可能来源是您正在使用另一个版本，即known to have issues。

【讨论】：

这根本不是答案。您没有告诉问题作者他如何解决他的问题。尝试更详细地回答错误的根源是什么，如果它的版本依赖或最终被纠正的项目问题，请描述它。如果 lib 版本在他的情况下不是一个选项，请建议他可以做什么。

【解决方案4】：

如果有人最近在寻找解决此问题的方法：

看起来他们已经更新了历史回购：-

使用'createHistory' 代替'createBrowserHistory'

请在店内尝试如下：

import { createHistory } from 'history';
const history = syncHistoryWithStore(createHistory(), store);

并确保将 'routerReducer' 作为一个额外的减速器添加到您的组合减速器中。

问候。

【讨论】：