Реагировать на history.push, требующий принудительного восстановления

Question

Я реализовал createBrowserHisotry в соответствии с этим постом Как получить историю на реакции-маршрутизаторе v4? , однако он перенаправляет только, если я установил для свойства конфигурации значение forceRefresh: true.Если я не установлю какие-либо свойства конфигурации, URL-адрес изменится на заданный URL-адрес, но страница не будет перенаправлена.Почему?

INDEX.JS

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App";
import { Router } from 'react-router-dom'
import registerServiceWorker from "./registerServiceWorker";
import history from "./components/common/History";

ReactDOM.render(<Router history={history}><App /></Router>, 
document.getElementById('root'));
registerServiceWorker();

HISTORY.JS

import createBrowserHistory from 'history/createBrowserHistory';

// export default createBrowserHistory(); --> This redirects the ### ### URL 
// but does not physically redirect

export default createBrowserHistory({
//pass a configuration object here if needed
forceRefresh: true
});

APP.JS

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <OidcProvider store={store} userManager={userManager}>
         <Router>
           <div className="container-fluid">
            <div>
             <Header />
            </div>
           <div>
            <Route exact path="/" render={props => <LoginForm auth={this.auth} {...props} />} />
            <Route exact path="/callback" render={props => <Callback auth={this.auth} {...props} />} />
            <Route exact path="/home" render={props => <HomePage {...props} />} />
            <Route exact path="/table" render={props => <TableContainer {...props} />} />
            <Route exact path="/form/:id" render={props => <FormContainer id={this.props.params.id} {...props} />} />
            <Route exact path="/form" render={props => <FormContainer {...props} />} />
          </div>
          <Footer />
        </div>
      </Router>
    </OidcProvider>
  </Provider>
);
}
}

 export default App;

Другой файл, вызывающий history.push

import history from "../components/common/History";

class CallbackPage extends React.Component {
render() {
    // just redirect to '/' in both cases
    return (
        <CallbackComponent
            userManager={userManager}
            successCallback={() => history.push("/home")}
            errorCallback={error => {
                history.push("/");
                console.error(error);
            }}
        >
            <div>Redirecting...</div>
        </CallbackComponent>
    );
   }
}


export default connect()(CallbackPage);

Answer 1

Проблема в вашем коде заключается в том, что вы используете несколько компонентов маршрутизатора.Вам не нужен маршрутизатор в компоненте index.js.Вместо этого просто визуализируйте его в App и предоставьте пользовательскую историю

index.js

ReactDOM.render(<App />, 
document.getElementById('root'));
registerServiceWorker();

, а затем передайте пользовательскую историю как реквизит, например

  <Router history={history}>
      {/* rest of the code */}
  </Router>

где history импортируется из common/history.js