React18: Uncaught Could not find router reducer in state tree, it must be mounted under "router"

160 Views Asked by At

Store.js

import { persistStore, persistReducer } from "redux-persist";
import { configureStore } from "@reduxjs/toolkit";
import storageSession from "redux-persist/es/storage/session";
import {
  routerHistoryMiddleware,
  sagaMiddleware,
} from "./Container/Middleware";
import history from "./Container/History";
import rootReducer from "./Reducer";
const persistedReducer = persistReducer(persistConfig, rootReducer(history));
const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: [sagaMiddleware, routerHistoryMiddleware],
});

Reducer.js

import { connectRouter } from "connected-react-router";
import { combineReducers } from "redux";
import { Auth } from "../Reducer/Auth";
export default (history) =>
  combineReducers({
    router: connectRouter(history),
    Auth,
  });

the connected-react-router is incompatibility with history 5.3.0???? i don't have idea...

index.js (routing)

const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </PersistGate>
  </Provider>
);

package.json

I installed the Redux DevTools and found this step has problem. problem

Saga.js (below is about SSO login) i tried to add consolog.log and cannot display... so that i think the problem is here...

export function* locationChangeWatcher() {
  yield all([takeLatest(LOCATION_CHANGE, locationChangeWorker)]);
}

function* locationChangeWorker(action) {
  const state = yield select((state) => state);
 
  
  const prevPathname = state.Context.renderPath;
  const nextPathname = action.payload.location.pathname;

  let query = new URLSearchParams(action.payload.location.search);
  let ticket = query.get("ticket");

  if (!ticket && !window.sessionStorage.getItem("st")) {
    window.location.assign(
      SSO_URL +
        "/cas/login?service=" +
        encodeURIComponent(window.location.href.replace("#", ""))
    );
  }
  if (window.location.pathname.split("/")[1] != "") {
    yield put(getAccess.request());
  }
  if (ticket) {
    window.sessionStorage.setItem("st", ticket);
    yield put(initAppl.request());
    query.delete("ticket");
    history.push(window.location.pathname + "?" + query.toString());
  } else {
    if (prevPathname != nextPathname) {
      yield put(renderPathChange({ renderPath: nextPathname }));
      if (
        prevPathname != getContextPath() &&
        nextPathname != getContextPath()
      ) {
        yield put(reset());
      }
    }
  }
}

0

There are 0 best solutions below