Home
React-router browserHistory.push nu redirecționează (Programare, Javascript, Reactjs, React Router)

React-router browserHistory.push nu redirecționează (Programare, Javascript, Reactjs, React Router)

aprilie 3, 2021 Programare
zsayn a intrebat.

Încercarea de a utiliza browserHistory.push pentru a-mi schimba traseul în mod programatic.

Se va schimba ruta (pe bara de adrese a browserului), dar nu actualizează vizualizarea.

Iată codul meu 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>
    );

Comentarii

  • De fapt, tocmai mi-am dat seama, nu-mi vine să cred. Nu am văzut că am folosit hashHistory în loc de browserHistory în interiorul <Router>, schimbarea la browserHistory a rezolvat totul –  > Por zsayn.
2 răspunsuri
KumarM

Configurația routerului dvs. utilizează hashHistory în timp ce tu împingi pe browserHistory.

Este ușor să ratezi ceva de genul acesta și este de înțeles.

  • Înlocuiți hashHistory cu browserHistory în Router astfel:

<Router history={browserHistory}>

Fragmentul complet:

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

Comentarii

  • Da, asta a fost problema, vă mulțumesc, mi-am dat seama aproape imediat ce am postat aici, după câteva ore de depanare 🙂 –  > Por zsayn.
James111

Dacă folosești cea mai nouă api react-router, va trebui să folosești:

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

Este posibil să aveți nevoie să legați acest la funcția dvs. atunci când accesați this.props (Notă: poate):

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

Vă rugăm să consultați următoarea întrebare pentru toate informațiile referitoare la acest subiect:

Navigare programatică folosind react router

Comentarii

Tags:, ,

Related Posts