Maison  >  Article  >  interface Web  >  Plusieurs façons de renvoyer la page dans React

Plusieurs façons de renvoyer la page dans React

藏色散人
藏色散人original
2022-10-25 17:49:393195parcourir

React a trois façons de revenir à la page, à savoir : 1. Revenir à la page précédente via "this.props.history.push('/home');" 2. Via "this.props.history. Return la page via replace('/home');"; 3. Renvoyez la page via "window.history.back(-1);".

Plusieurs façons de renvoyer la page dans React

L'environnement d'exploitation de ce tutoriel : système Windows7, version React18.0.0, ordinateur Dell G3.

Combien de façons de revenir à la page dans React ?

react Comment écrire la version mobile pour revenir à la page précédente

Comment écrire la version mobile pour revenir à la page précédente :

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;

Plusieurs façons de renvoyer la page dans React

Apprentissage recommandé : "tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn