在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都会使用与渲染道具相同的道具（{匹配，位置，历史}）来重新渲染其组件。

像这样：

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