Question

我在我的应用程序中使用https://maps.googleapis.com/maps/api/place/textsearch/json?query=new+york+city+point+of+interest&language=en&key=API_KEY。

在我的登录页面中，我需要使用react-router进行身份验证，并在成功时重定向。

有些人喜欢以下代码：

ajax

在我的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> ) } }函数中，如果验证成功，如何重定向到另一个页面？

Answer 1

上下文是最好的选择，但是官方文档告诉您，您也可以使用withRouter将router道具放到正确执行历史状态转换的组件中：

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

您将在上下文中引用路由器。 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
}

如果您不想将路线推送到历史记录，而是替换当前路线，则可以call replace instead。 API与push相同。

如何在React-Router中使用Javascript重定向页面？

2 个答案: