React返回頁面的方式有哪些

這篇文章主要介紹了React返回頁面的方式有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇React返回頁面的方式有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。

React返回頁面有3種方式，分別是：1、通過“this.props.history.push('/home');”方式返回到上一級(jí)頁面；2、通過“this.props.history.replace('/home');”方式返回頁面；3、通過“window.history.back(-1);”返回頁面。

React返回頁面的幾種方式？

react 移動(dòng)端返回上一級(jí)頁面的寫法

移動(dòng)端返回上一級(jí)頁面的寫法：

import React, {Component} from 'react';
import './style.less';
 
class Header extends Component {
 
    clickBackHandler (){
        // 返回到上一級(jí)頁面的幾種方法
        //第一種 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>
                <h2>{ this.props.title }</h2>
            </div>
        );
    }
}
 
export default Header;

關(guān)于“React返回頁面的方式有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“React返回頁面的方式有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。