以编程方式在React-Router v4中导航

Question

在完成一些验证后,如何移动到新页面React Router V4？我有这样的事情:

export class WelcomeForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault()

        if(this.validateForm())
            // send to '/life'

    }
    render() {
        return (
            <form className="WelcomeForm" onSubmit={this.handleSubmit}>
                <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
            </form>
        )
    }
}

我想将用户发送到另一条路线.我看了一下Redirect,但似乎它会删除我不想要的历史记录中的当前页面.

Answer 1

您正在使用react-router v4,因此您需要将withRouter与您的组件一起使用以访问历史对象的属性,然后使用它history.push来动态更改路由.

withRouter:

您可以通过withRouter高阶组件访问历史对象的属性和最接近的匹配.每当路径改变时,withRouter将重新渲染其组件,其中包含与渲染道具相同的道具:{match,location,history}.

像这样:

import {withRouter} from 'react-router-dom';

class WelcomeForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault()
        if(this.validateForm())
            this.props.history.push("/life");
    }

    render() {
        return (
            <form className="WelcomeForm" onSubmit={this.handleSubmit}>
                <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
            </form>
        )
    }
}

export default withRouter(WelcomeForm);