Home > Web Front-end > JS Tutorial > Several ways to return the page in React

Several ways to return the page in React

藏色散人
Release: 2022-10-25 17:49:39
Original
3213 people have browsed it

React has three ways to return to the page, namely: 1. Return to the previous page through "this.props.history.push('/home');"; 2. Return to the previous page through "this.props.history.push('/home');" Return to the page through props.history.replace('/home');"; 3. Return to the page through "window.history.back(-1);".

Several ways to return the page in React

The operating environment of this tutorial: windows7 system, react18.0.0 version, Dell G3 computer.

How many ways does React return the page?

react How to write the mobile terminal to return to the previous level page

How to write the mobile terminal to return to the previous level page:

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;
Copy after login

Several ways to return the page in React

Recommended learning: "react video tutorial"

The above is the detailed content of Several ways to return the page in React. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template