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>
    );

Answer 1

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>
    );
  }
});