路由问题：React-connected-router正在更改路径，但未呈现组件

问题描述

我在我的React应用中路由存在问题。 在我的应用程序中，我同时拥有connected-react-router和redux-persist。问题是当我单击一个按钮时，我希望视图和路径会从一个更改为另一个。但是只有我自己刷新后，路径才会改变，视图也不会改变。 你能帮我吗？

下面是我的代码

// redirect.js

import React from "react";
import { push,goBack as goBackRouter } from "connected-react-router";
import { Redirect } from "react-router-dom";
export const redirectTo = (page,dispatch) => {
  dispatch(push(page));
  // window.location.href = page;
  
};
export const goBack = (dispatch) => {
  return dispatch(goBackRouter());
};

// reducer（index.js）

import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import storageSession from "redux-persist/lib/storage/session";
import localSession from "redux-persist/lib/storage";
import gridwall from "./gridwall";
import pdp from "./pdp";

const appReducer = (history) =>
  combineReducers({
    router: connectRouter(history),gridwall,pdp,});


export default appReducer;

//存储配置

import rootReducer from "./reducers"
import { createStore,applyMiddleware,compose} from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import {routerMiddleware,connectRouter} from 'connected-react-router'
import {createbrowserHistory} from 'history'
import { persistStore,persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig ={
  key:'root',storage,// blacklist:['router']
}

const persistedReducer = history=>persistReducer(persistConfig,rootReducer(history))
const composeEnhancer = window.__Redux_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export const history = createbrowserHistory()

export const store =  createStore(
    //root reducer with router states
    connectRouter(history)(persistedReducer(history)),composeEnhancer(
      applyMiddleware(
        //for dispatching history actions
        routerMiddleware(history)
      )
    )
  )


export const persistor =  persistStore(store)

// app.js

const App =（）=> {

返回（

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <Suspense fallback={<div>Loading...</div>}>
      <ConnectedRouter history={history}>
        <Header />
        <Container>
        <CategoryNav/>
        <Routes />
        </Container>
        <Footer />
      </ConnectedRouter>
    </Suspense>
  </PersistGate>
</Provider>

） };

导出默认应用；

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）