React history.push() is updating url but not navigating to it in browser

Question

I\'ve read many things about react-router v4 and the npm history library to this point, but none seems to be helping me.

My code is functioning as expected up to t

Answer 1

or else you can simple call this function

window.location.reload(false);

after history() function which reloads the page

Answer 2

You shouldn't need to downgrade to v3, React-Router 4.0.0 is totally capable of accomplishing what the OP asks for.

const history = createBrowserHistory();

is a custom history object so you should use <Router> to synchronize it with react-router instead of <BrowserRouter>, which is what I assumed you were using.

Try this instead:

import React, {Component} from 'react';
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }

   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

Once your custom history object is passed in via Router's history prop, history.push should work just as expected in anywhere of your app. (you might want to put your history object in a history config file and import it at places where you want to route programmatically).

For more info, see: React Router history object

Answer 3

Rendering this would refresh on route change

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

react-router-dom : 4.2.2

Answer 4

import Router from react-router-dom not BrowserRouter

// index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    import { Router } from "react-router-dom";
    import history from './utils/history'


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

    serviceWorker.register();


// history.js 

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

on other components that you need to navigate import history and push

import History from '../utils/history'

History.push('/home')

Answer 5

Check if you don't have nested BrowserRouter tags.

I had this issue on react-router v4 but I solved it after changing the app to only have the BrowserRouter at the top most level like the example below.

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

Answer 6

Please ensure that you are using

const history = createBrowserHistory({forceRefresh:true});

not

const history = createBrowserHistory();

I was able to update the page once I added "{forceRefresh:true}"