javascript - 如何修复错误: Could not find router reducer in state tree,它必须安装在 "router"下

Question

我得到 - 错误:无法在状态树中找到路由器 reducer ，它必须安装在“路由器”下。

我已经阅读了所有类似的主题。尝试了不同的变体，但找不到解决方案。我仍然没有足够的知识来理解这个主题。如果您知道如何解决，请帮助修复此错误。

index.js

import { render } from 'react-dom';
import { Provider, ReactReduxContext } from 'react-redux';
import React from 'react';
import { store, history} from './store';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import App from './components/App/App';

render(
    <Provider store={store}>
        <ConnectedRouter history={history} context={ReactReduxContext}>
            <Switch>
                <Route path="/" component={App} />
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);

reducers.js 的一部分

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

export default combineReducers({
    router: routerReducer
});

store.js

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { routerMiddleware } from 'react-router-redux'
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();
const getMiddleware = () => applyMiddleware(
    routerMiddleware(history), promiseMiddleware, localStorageMiddleware, createLogger()
);

export const store = createStore(
    reducer,
    getMiddleware(),
);

尝试这样做:在 store.js 中

import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducers/reducers';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';

export const history = createBrowserHistory();
const myRouterMiddleware = routerMiddleware(history);

const getMiddleware = () => applyMiddleware(
    myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger()
);

export const store = createStore(
    reducer(history),
    getMiddleware()
);

在reducers.js中

import authorization from './authorization';
import mainstate from './mainstate';
import home from './home';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'

export default (history) => combineReducers({
    authorization,
    mainstate,
    home,
    router: connectRouter(history)
});

遇到同样的错误:(

Answer 1

有几个问题。

createStore(reducer, getMiddleware()) - 增强器(中间件)需要是第三个参数，第二个参数应该是存储的初始状态。请参阅the docs here .

试试这个

createStore(reducer, {}, getMiddleware())

---

另一个问题是 history 包的版本，对于 react-router-dom v5，您需要使用 history v4(最新版本是 4.10.1) - history v5 仅与 react-router-dom v6 兼容。

在您在下面的评论中发布的 Codesandbox 中，更改 package.json 中的以下内容使其正常工作

"dependencies": {
  ...
  "history": "^5.0.0", -> "history": "4.10.1",
  ...
}