我正在将干净的Ract应用重构为Redux。
我已经定义了一些 Action 并测试了reduce。
我在Router&History上有堆栈。
我收到错误消息:
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')
);
我不知道为什么会这样:(
最佳答案
我通过遵循此comment解决了此问题。在我将其更新为“react-router”:“^ 4.1.1”和“react-router-redux”:“^ 4.0.8”之后。这确实解决了从react-router使用browserHistory的问题,但是可以解决。
解决方法要求您执行以下操作:
import { createBrowserHistory } from 'history';
const history = syncHistoryWithStore(createBrowserHistory(), store);
关于这个问题的评论似乎建议尝试使用2个插头的不同组合。我通过安装“react-router”:“^ 3.0.2”和“react-router-redux”:“^ 4.0.8”来测试代码,它也可以工作。
关于react-router-redux:无法读取syncHistoryWithStore中未定义的 'listen'属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42552067/