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

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 to synchronize it with react-router instead of , 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 (
              //pass in your custom history object
                
                
           
       )
   }
}

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