Reactjs Redux Persist和Connected React路由器:类型错误:无法读取属性';地点';未定义的
我试图让React应用程序与React Router和Redux一起正常工作,但我不断得到Reactjs Redux Persist和Connected React路由器:类型错误:无法读取属性';地点';未定义的,reactjs,redux,redux-persist,connected-react-router,Reactjs,Redux,Redux Persist,Connected React Router,我试图让React应用程序与React Router和Redux一起正常工作,但我不断得到TypeError:无法将未定义的属性“location”读取到任何具有Redux的组件。我正在使用connected react routerlib在商店中注册路由器,但显然我做错了什么 store/configureStore.js import { createStore, applyMiddleware, compose } from 'redux'; import reducer from '..
TypeError:无法将未定义的属性“location”读取到任何具有Redux的组件。我正在使用connected react router
lib在商店中注册路由器,但显然我做错了什么
store/configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import { persistStore } from 'redux-persist';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from "connected-react-router";
let _persistor;
let _store;
export const history = createBrowserHistory();
export const getStore = (props) => {
if (_store) {
return _store;
}
const initialState = (props) ? {...props} : {};
_store = createStore(
reducer,
initialState,
compose(
applyMiddleware(routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
),
);
_persistor = persistStore(_store);
return _store;
};
export const getPersistor = () => {
return _persistor;
};
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import Menu from './Menu';
import SelectedServices from './SelectedServices';
import { connectRouter } from 'connected-react-router'
import { history } from "../store/configureStore";
const rootReducer = (history) => combineReducers({
router: connectRouter(history),
menu: Menu,
selectedServices: SelectedServices,
});
const reducer = persistReducer(
{
key: 'root',
storage: require('localforage'),
whitelist: [],
},
rootReducer(history),
);
export default reducer;
减速机/index.js
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from '../reducers';
import { persistStore } from 'redux-persist';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from "connected-react-router";
let _persistor;
let _store;
export const history = createBrowserHistory();
export const getStore = (props) => {
if (_store) {
return _store;
}
const initialState = (props) ? {...props} : {};
_store = createStore(
reducer,
initialState,
compose(
applyMiddleware(routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
),
);
_persistor = persistStore(_store);
return _store;
};
export const getPersistor = () => {
return _persistor;
};
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import Menu from './Menu';
import SelectedServices from './SelectedServices';
import { connectRouter } from 'connected-react-router'
import { history } from "../store/configureStore";
const rootReducer = (history) => combineReducers({
router: connectRouter(history),
menu: Menu,
selectedServices: SelectedServices,
});
const reducer = persistReducer(
{
key: 'root',
storage: require('localforage'),
whitelist: [],
},
rootReducer(history),
);
export default reducer;
经过三个小时的调试和阅读更多关于连接的react-router
、react-redux
和react-router dom
的每个库的信息后,我发现有一行我跳过了好几次,但最终我在我的包.json
中检查了它。目前:
v6.0.0需要React v16.4.0和React Redux v6.0。(它还不支持React Redux v7.0。我们正在研究兼容性问题。)
我使用的是react-redux:v7.0.1
,这对我来说是一个真正的facepalm。所以我降级到v6,一切都可以正常启动。不完全是这样,我在react redux:v7.0.1上实现了它