为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕村225694 2019-10-21 15:02:12

完成某些验证后,如何移动到新页面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,但似乎它将从我不想要的历史记录中删除当前页面。


查看完整描述

3 回答

?
喵喔喔

您正在使用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);


查看完整回答
反对 回复 2019-10-21
?
繁花如伊

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


重定向组件


渲染会导航到新位置。新位置将覆盖历史记录堆栈中的当前位置,就像服务器端重定向(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相同的道具。但是,它带有一个限制,即每个文件只能有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>

            )

        }

    }


查看完整回答
反对 回复 2019-10-21
?
jeck猫

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


查看完整回答
反对 回复 2019-10-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信