React18:未捕获在状态树中找不到路由器减速器,它必须安装在“路由器”下

问题描述 投票:0回答:0

商店.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,
  });

connected-react-router 与 history 5.3.0 不兼容????我不知道...

index.js(路由)

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

我安装了Redux DevTools,发现这一步有问题。 problem

Saga.js(下面是关于SSO登录的)我试图添加consolog.log并且无法显示......所以我认为问题就在这里......

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());
      }
    }
  }
}

javascript reactjs react-router history react-dom
© www.soinside.com 2019 - 2024. All rights reserved.