React-router browserHistory.push doesn't redirect

Question

Trying to use browserHistory.push method to change my route programmatically.

It will change the route (per browser address bar) but doesn't update the view.

Here's my code App.jsx

const AppStart = React.createClass({

  render: function() {
    return (
      <MuiThemeProvider>
        <Router history={hashHistory}>
          <Route path="/" component={Main}>
            <Route path="experiences" component={Experiences} />
            <Route path="people" component={Profiles} />
            <Route path="login" component={Login} />
            <IndexRoute component={Home}/>
          </Route>
        </Router>
      </MuiThemeProvider>
    );
  }
});

ReactDOM.render(
  <AppStart />,
  document.getElementById('app')
);

Component:

handleLoginRedirect(e) {
    browserHistory.push('/experiences');
  },

  render() {
    return (
      <div className='row'>
        <div className='col-sm-10 col-sm-offset-1'>
          <form role='form'>
           <RaisedButton label="Redirect" onClick={this.handleLoginRedirect} />
          </form>
        </div>
      </div>
    );

Actually just figured it out, can't believe it. I didn't see that I used hashHistory instead of browserHistory inside , changing to browserHistory fixed everything — zsayn, Aug 12 '16 at 01:54

score 4 · Accepted Answer · edited Nov 18 '16 at 16:07

Your router configuration uses hashHistory while you're pushing onto browserHistory.

It's easy to miss something like this and it's understandable.

Replace hashHistory with browserHistory in your Router like so:

<Router history={browserHistory}>

Full Snippet:

const AppStart = React.createClass({

  render: function() {
    return (
      <MuiThemeProvider>
        <Router history={browserHistory}>
          <Route path="/" component={Main}>
            <Route path="experiences" component={Experiences} />
            <Route path="people" component={Profiles} />
            <Route path="login" component={Login} />
            <IndexRoute component={Home}/>
          </Route>
        </Router>
      </MuiThemeProvider>
    );
  }
});

Yep, that was the issue, thank you, figured it out almost as soon as I posted here, after a couple of hours debugging :) — zsayn, Aug 15 '16 at 22:21

score 2 · Answer 2 · edited May 23 '17 at 12:00

2

If you're using the newest react-router api you'll need to use:

this.props.history.push('/path/goes/here');

You may need to bind this to your function when accessing this.props (note: may):

onClick={this.handleLoginRedirect.bind(this)}

Please refer to the following question for all the information on this topic:

Programmatically navigate using react router

edited May 23 '17 at 12:00

Community

1
1

answered Aug 12 '16 at 01:38

James111

15,378
15
78
121

When you say latest, what version did you mean? AFAIK, browserHistory.push is supported and here's a usage example in react-router docs: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#navigating-inside-deeply-nested-components. HTH – KumarM Aug 12 '16 at 03:33

React-router browserHistory.push doesn't redirect

2 Answers2