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

Question

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

在我的login功能中,如果身份验证成功,如何重定向到另一个页面？

Answer 1

上下文是最好的选择,但是官方文档告诉您也可以使用withRouter将routerprop添加到正确执行历史状态转换的组件:

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