Jak przekierować stronę z Javascriptem w React-Router?

Question

Używam w mojej aplikacji react-router.

Na mojej stronie logowania potrzebuję uwierzytelnienia z ajax i przekierowania w razie sukcesu.

Niektórzy lubią następujący kod:

class PageLogin extends React.Component { 
    login() { 
     // How to can I redirect to another page if auth success? 
    } 

    render() { 
     return (
      <div className="login-page"> 
       <form action=""> 
        <div className="form-group"> 
         <label>Username:</label> 
         <input type="text"/> 
        </div> 
        <div className="form-group"> 
         <label>Password:</label> 
         <input type="text"/> 
        </div> 
        <div> 
         <button onClick={this.login}>Login</button> 
        </div> 
       </form> 
      </div> 
     ) 
    } 
} 

W moim login funkcji, jak można przekierować na inną stronę, jeśli sukces uwierzytelniania?

Answer 1

Kontekst jest najlepszym rozwiązaniem, jednak oficjalna dokumentacja mówi, że można również użyć withRouter umieścić router rekwizyt do składnika, który będzie prawidłowo wykonywać historię przejścia Stan:

import { withRouter } from 'react-router'; 

class PageLogin extends React.Component { 
    login() { 
     this.props.history.push('/some/location'); // for react-router@3 it would be this.props.router.push('/some/location'); 
    } 

    render() { 
     return (
      <div className="login-page"> 
       <form action=""> 
        <div className="form-group"> 
         <label>Username:</label> 
         <input type="text"/> 
        </div> 
        <div className="form-group"> 
         <label>Password:</label> 
         <input type="text"/> 
        </div> 
        <div> 
         <button onClick={this.login}>Login</button> 
        </div> 
       </form> 
      </div> 
     ) 
    } 
} 

export default withRouter(PageLogin); 

Answer 2

Będziesz mieć odniesienie do routera w kontekście. You can simply call router.push with your new path to redirect.

class PageLogin extends React.Component { 
    login() { 
    this.context.router.push('/newPath'); 
    } 
    ... 
} 

PageLogin.contextTypes = { 
    router: React.PropTypes.object 
} 

może

Jeśli nie chcesz, aby wcisnąć drogę do ich historii, ale zamiast zastąpić ich aktualnej trasy, call replace instead. Interfejs API jest identyczny z push.