React返回页面有多少方法,代码是什么

Admin 2022-11-14 群英技术资讯 298 次浏览

这篇文章给大家介绍了“React返回页面有多少方法,代码是什么”的相关知识,讲解详细,步骤过程清晰,有一定的借鉴学习价值,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧。

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;
登录后复制


这篇关于“React返回页面有多少方法,代码是什么”的文章就介绍到这了,更多相关的内容,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章! 群英智防CDN,智能加速解决方案
标签: React返回页面

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服