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 the point when it should navigate and do a simple redirect when the url is changed using the history.push() method. The URL IS changing to the specified route, but not doing the redirect on the button push.

I would like for the button push to do a simple redirect without the {forceRefresh:true}, which then reloads the whole 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 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')
);