5

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);
3
  • Possible Duplicate of React router changes url but not view Commented Mar 27, 2019 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? Commented Mar 27, 2019 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 reacttraining.com/react-router/web/api/withRouter Commented Mar 27, 2019 at 17:00

2 Answers 2

24

Use this:

this.props.history.push('/index');    
this.props.history.go();
Sign up to request clarification or add additional context in comments.

Comments

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

2 Comments

@ShunhamKhatri - I am using history in the Router. Please see index.js above. Am I misunderstanding?
@rralbritton, ok so the problem is that you are using multiple Routers. Updated the answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.