React history.push requiring a forceRefresh

Question

I have implemented createBrowserHisotry according to this post How to get history on react-router v4?, however it only redirects if I set a configuration property to forceRefresh: true. If I do not set any config properties, the url changes to the pushed url but the page will not redirect. Why?

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;

Another file calling 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);

Possible Duplicate of [React router changes url but not view](https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view/43352623#43352623) — Shubham Khatri, Mar 27 '19 at 16:40
@ShubhamKhatri - thank you for the suggestion - I added the App.JS file above for more clarity. I have my routes specified as exact already. I did notice that the link you provided had exact at the end of the route specified rather then the beginning like I have done - does that matter though? — reactFullStackDeveloper, Mar 27 '19 at 16:48
By default React Router doesn't cause the browser to navigate to new url. If you really need to navigate to a new location just use `window.location.href = ...`. Also try to use `BrowserRouter` and `history` object provided by React Router https://reacttraining.com/react-router/web/api/withRouter — UjinT34, Mar 27 '19 at 17:00

score 22 · Answer 1 · edited Feb 22 '20 at 22:40

22

Use this:

this.props.history.push('/index');    
this.props.history.go();

edited Feb 22 '20 at 22:40

baitmbarek

2,440
4
18
26

answered Feb 22 '20 at 19:46

Genildo

321
2
3

Shubham Khatri · Accepted Answer · 2019-03-28T05:55:01.760

1

The problem in your code is that you are using multiple Router components. You do not need Router in the index.js component. Instead just render it in App and provide the custom history

index.js

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

and then pass in the custom history as prop like

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

where history is imported from common/history.js

edited Mar 28 '19 at 05:55

answered Mar 27 '19 at 18:28

Shubham Khatri

270,417
55
406
400

@ShunhamKhatri - I am using history in the Router. Please see index.js above. Am I misunderstanding? – reactFullStackDeveloper Mar 27 '19 at 22:25
@rralbritton, ok so the problem is that you are using multiple Routers. Updated the answer – Shubham Khatri Mar 28 '19 at 05:53

React history.push requiring a forceRefresh

INDEX.JS

HISTORY.JS

APP.JS

Another file calling history.push

2 Answers2