js教程React返回页面的几种方式

 所属分类:web前端开发

 浏览:160次-  评论: 0次-  更新时间:2022-11-05
描述:更多教程资料进入php教程获得。 React返回页面有3种方式,分别是:1、通过“this.props.history.push('/home');”方式返回到上一级...
更多教程资料进入php教程获得。

React返回页面有3种方式,分别是:1、通过“this.props.history.push('/home');”方式返回到上一级页面;2、通过“this.props.history.replace('/home');”方式返回页面;3、通过“window.history.back(-1);”返回页面。

本教程操作环境:windows7系统、react18.0.0版、Dell G3电脑。

React返回页面的几种方式?

react 移动端返回上一级页面的写法

移动端返回上一级页面的写法:

import React, {Component} from 'react';
import './style.less';
 
class Header extends Component {
 
    clickBackHandler (){
        // 返回到上一级页面的几种方法
        //第一种 this.props.history.push('/home');
        //第一种 this.props.history.replace('/home'); 但这两种方法都不好
        //第三种方法,推荐使用
        window.history.back(-1);
    }
 
    render() {
        return (
            <div id="common-header">
                {/*Header 公共头组件*/}
                <span className="back-icon">
                    <i className="icon-chevron-left" onClick={ this.clickBackHandler }></i>
                </span>
                <h1>{ this.props.title }</h1>
            </div>
        );
    }
}
 
export default Header;
登录后复制

01a87f012adb5ae0f4f9ec7d38a13d2.jpg

推荐学习:《react视频教程》

以上就是React返回页面的几种方式的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!