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 id="nbsp-this-props-title-nbsp">{ this.props.title }</h1>
            </div>
        );
    }
}
 
export default Header;

推薦學習：《react影片教學》

以上是React返回頁面的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！