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来访问历史记录对象的属性，然后使用private static final int DBVERSION=1; public DatabaseHelper(Context context) { super(context, DATABASE_NAME, null, DBVERSION); }动态更改路由。

<强> withRouter

您可以访问历史对象的属性和最近的属性通过withRouter高阶组件进行匹配。 withRouter 每当路线改变时，它将重新渲染其组件与渲染道具相同的道具：{匹配，位置，历史}。

像这样：

history.push

Answer 2

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

重定向组件

渲染a将导航到新位置。新位置将覆盖历史堆栈中的当前位置，如服务器端重定向（HTTP 3xx）。

to: string - 重定向到的网址。
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>
        )
    }
}

使用withRouter HoC

此高阶组件将注入与Route相同的道具。但是，它带有限制，每个文件只能有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>
            )
        }
    }

Answer 3

您可以使用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中的某处使用它。

Answer 4

如果您使用的是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)

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

4 个答案: