connectedRouter 오류: 상태 트리에서 라우터 리듀서를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다.

connectedRouter 오류: 상태 트리에서 라우터 리듀서를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다.

저는 React.js에 처음 접속하여 베이스 프로젝트를 셋업하고 있었는데 라우팅이 변경되었지만 컴포넌트가 로드되지 않는다는 문제가 하나 있었습니다.구글 검색 후 Connected Router를 사용해야 한다는 것을 알게 되었습니다.Connected Router 설정 중 상태 트리에서 라우터 리덕터를 찾을 수 없습니다. "router" 아래에 마운트해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ConnectedRouter, connectRouter, routerMiddleware } from "connected-react-router";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import loginReducer from "./store/reducers/login";
import { watchLogin} from "./store/sagas";
import { history } from '../src/shared/history';
import { push } from 'react-router-redux';



import './index.css';
import App from './App';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers({
    login: loginReducer
});
const routersMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, routersMiddleware];

const store = createStore(
    connectRouter(history)(rootReducer),
    {},
    composeEnhancers(applyMiddleware(...middlewares))
);

sagaMiddleware.run(watchLogin);

const app = (
    <Provider  store={store}>
        <ConnectedRouter  history={history}>
            <App />
        </ConnectedRouter>
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));

이 문제에 대한 미래의 영혼들을 돕기 위해, 링크된 기트허브 토론에 따르면, 그 버전 5.0은history패키지가 문제의 원인이 되어 버전 4.10.1로 다운그레이드하면 문제가 해결됩니다.

npm install history@4.10.1

https://github.com/ReactTraining/history/issues/803

https://github.com/ReactTraining/history/issues/804

더하다router사용으로 환원제에서connectRouter그리고.history

이 링크를 참조해 주세요.

https://www.npmjs.com/package/connected-react-router

import { connectRouter } from 'connected-react-router'
const rootReducer = combineReducers({
  login: loginReducer,
  router: connectRouter(history),
});

주요 문제는 이력 패키지의 버전입니다.react-router-dom v5에서는 이력 v4(최신 버전은 4.10.1)를 사용해야 합니다.이력 v5는 react-router-dom v6에만 호환됩니다.

잊으셨습니다.

router: connectRouter(history), 

combineReducers()에서

사용하시는 경우immutableImport해야 합니다.ConnectedRouterconnected-dismptive/immutable'에서 선택합니다.

저도 같은 문제에 부딪혔어요.스토어 초기화 시 이력을 rootReducer 파라미터로 지정하지 않았습니다.

const store = createStore(
  rootReducer(history), // <-- HERE
  {},
  ...
)

언급URL : https://stackoverflow.com/questions/54315988/connectedrouter-error-could-not-find-router-reducer-in-state-tree-it-must-be-m