React history.push () updates the url but doesn't go to it in the browser

Question

I read a lot of things about the v4 reactive router and the npm history library until now, but no one is helping me.

My code functions as expected until the moment it should move, and performs a simple redirect when changing the URL using the history.push () method. The IS URL changes to the specified route, but does not redirect when the button is clicked. Thanks in advance, while still studying the jet router ...

I would like the button to click to do a simple redirect without {forceRefresh: true}, which then reloads the entire page.

import React from 'react'; import createBrowserHistory from 'history/createBrowserHistory'; const history = createBrowserHistory({forceRefresh:true}); export default class Link extends React.Component { onLogout() { history.push("/signup"); } render() { return( <div> <h1>Your Links</h1> <button onClick={this.onLogout.bind(this)}>Log Out</button> </div> ) } } 

Answer 1

Check for nested BrowserRouter tags.

I had this problem on response-router v4, but I solved it after changing the application to only have the BrowserRouter browser at the highest level, as in the example below.

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

Answer 2

You do not need to downgrade to v3, React-Router 4.0.0 is fully capable of fulfilling what the OP requires.

 const history = createBrowserHistory(); 

is a custom history object, so you should use <Router> to synchronize with the <BrowserRouter> router instead of <BrowserRouter> , which I assumed you used.

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 through the router's history prop, history.push should work as expected, anywhere in your application. (you can put your history object in the history configuration file and import it in the places where you want to route programmatically)

Hope this help!

For more information, see: Restore Router History Object

Answer 3

I have the same problem.

After some searching, I found this reaction router problem

I am currently browserHistory router to version v3 and I am using the browserHistory from the react-router package and it works fine.

Answer 4

Ladies and Gentlemen. For router V4. This is what worked for me. @Tina's answer didn't work for me. Add the following steps to make it work.

 History.js import createHistory from 'history/createBrowserHistory'; export default createHistory({ basename: '/' //This is very important! Set your basename for the history class to track 

})

Further

 ActionClass.js import History from History.js function doSomething(blah){ return dispatch => { //Make your service calls //process response // History.push(//path you want the user to be navigated to. Note all this does is add the url path in the address bar ) History.go (//this should force the browser to actually get going) }