react-router-redux：将替换操作分派到存储后（URL和redux存储已更新），无法更新视图/页面

Question

我正在使用react-router和react-router-redux开发一个Web应用程序。我使用提示组件来显示自定义模式，以检查用户是否要离开页面。

URL已更新，并且已成功调度LOCATION_CHANGE操作，但视图/页面未更新。

CodeSandBox：https://codesandbox.io/s/elegant-cdn-sm6zg

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./App.css";
import A from "./components/A";
import B from "./components/B";
import BFallback from "./components/BFallback";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import { Provider } from "react-redux";
import { applyMiddleware, createStore, compose } from "redux";
import rootReducer from "./reducers/rootReducer";
import {
  routerMiddleware,
  replace,
  syncHistoryWithStore
} from "react-router-redux";
import { Prompt } from "react-router";
import Nav from "./components/Nav";

let history = createHistory();
const middleware = routerMiddleware(history);
const store = createStore(rootReducer, applyMiddleware(middleware));
history = syncHistoryWithStore(history, store);

const PrivateRoute = ({
  component: Component,
  forward,
  fallbackPath,
  ...rest
}) => (
  <Route
    {...rest}
    render={props => {
      console.log("forward:::::", forward);
      return forward ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: fallbackPath,
            state: { from: props.location }
          }}
        />
      );
    }}
  />
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false,
      showCustomModal: false,
      nextLocation: null
    };
  }
  setLoggedIn = loggedIn => {
    this.setState({ loggedIn });
  };
  handleBlockedNavigation = nextLocation => {
    this.setState({
      nextLocation
    });
    return false;
  };
  forwardNavigation = () => {
    console.log("forwardNavigation:::::", this.state.nextLocation);

    //  changes redus state and url, but not view/page
    store.dispatch(replace(this.state.nextLocation.pathname));

    this.clearNextLocation();
  };
  clearNextLocation = () => {
    this.setState({ nextLocation: null });
  };
  render() {
    return (
      <Provider store={store}>
        <Router basename={window.location.pathname} history={history}>
          <div>
            <Nav
              setLoggedIn={this.setLoggedIn}
              loggedIn={this.state.loggedIn}
            />
            <Prompt message={this.handleBlockedNavigation} />
            {this.state.nextLocation && (
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%,-50%)",
                  boxShadow: "0 0 10px 1px rgba(0,0,0,0.2)",
                  padding: "15px"
                }}
              >
                Are you sure you want to leave?
                <button onClick={this.forwardNavigation}>Yes</button>
                <button onClick={this.clearNextLocation}>No</button>
              </div>
            )}
            <Switch>
              <Route exact path={`/A`} component={A} />
              <PrivateRoute
                exact
                path={`/B`}
                component={B}
                forward={this.state.loggedIn}
                fallbackPath="/BFallback"
              />
              <PrivateRoute
                exact
                path={`/BFallback`}
                component={BFallback}
                forward={!this.state.loggedIn}
                fallbackPath="/B"
              />
              <Route path={`/`} component={A} />
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我希望视图/页面，redux状态和url同时更改。任何帮助将不胜感激。非常感谢。