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

带路由器：

您可以通过 withRouter 高阶组件访问历史对象的属性和最接近的匹配项。每次路由更改时，withRouter 都会使用与渲染props相同的props重新渲染其组件：{匹配，位置，历史}。

像这样：

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

您可以使用withRouter将history对象作为属性注入的高阶组件。然后你可以使用history.push重定向：

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

要进行重定向，您也可以<Redirect to="/someURL" />在某些情况下使用，但必须渲染此组件，因此您必须在 JSX 中的某处使用它。

根据您希望重定向的行为方式，有多种选择：React router docs

重定向组件

渲染 a 将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向 (HTTP 3xx) 那样。

to: string- 要重定向到的 URL。
to: object- 要重定向到的位置。
push: bool- 当为 true 时，重定向会将新条目推送到历史记录中，而不是替换当前条目。

例子： <Redirect push to="/somewhere"/>

import { Route, Redirect } from 'react-router'


export class WelcomeForm extends Component {

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

        if(this.validateForm())
            <Redirect push 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>
        )
    }
}

使用withRouterHoC

这个高阶组件将注入与 Route 相同的 props。但是，它存在每个文件只能有 1 个 HoC 的限制。

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

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

如果您使用 TypeScript 扩展您的组件，请使用React.Component<RouteComponentProps>以this.props.history.push正确获取

class YourComponent extends React.Component<RouteComponentProps> {
    constructor(props: Readonly<RouteComponentProps>) {
        super(props)
    }

    public render(){
        // you can access history programmatically anywhere on this class
        // this.props.history.push("/")
        return (<div/>)
    }
}
return default withRouter(YourComponent)