javascript - React-router browserHistory.push doesn't redirect - Stack Overflow

admin管理员组

文章数量:1290059

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="/" ponent={Main}>
            <Route path="experiences" ponent={Experiences} />
            <Route path="people" ponent={Profiles} />
            <Route path="login" ponent={Login} />
            <IndexRoute ponent={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>
    );

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="/" ponent={Main}>
            <Route path="experiences" ponent={Experiences} />
            <Route path="people" ponent={Profiles} />
            <Route path="login" ponent={Login} />
            <IndexRoute ponent={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>
    );

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Nov 18, 2016 at 15:40 DeBraid 9,44155 gold badges3333 silver badges4343 bronze badges asked Aug 12, 2016 at 1:32 zsaynzsayn 21711 gold badge33 silver badges99 bronze badges 1

• 1 Actually just figured it out, can't believe it. I didn't see that I used hashHistory instead of browserHistory inside <Router>, changing to browserHistory fixed everything – zsayn Commented Aug 12, 2016 at 1:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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="/" ponent={Main}>
            <Route path="experiences" ponent={Experiences} />
            <Route path="people" ponent={Profiles} />
            <Route path="login" ponent={Login} />
            <IndexRoute ponent={Home}/>
          </Route>
        </Router>
      </MuiThemeProvider>
    );
  }
});

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

本文标签： javascriptReactrouter browserHistorypush doesn39t redirectStack Overflow