How to implement forward and backward in react-router

React-router implements forward and backward methods: 1. Implement routing forward through "goback(){this.props.history.goBack()}"; 2. Through "go(){this.props. history.go(-1) }" to implement routing rollback.

#The operating environment of this tutorial: Windows 10 system, react18 version, Dell G3 computer.

How does react-router implement forward and backward?

React-routing jump method and routing forward and back

1. Tag jump

//1.引入依赖
import { Link  } from 'react-router-dom'
//2.在需要的地方加上这段，Link标签是a标签
<Link to={{ pathname: /*你的路由*/ }} replace> </Link>

2. Event jump

//1.引入依赖
import { withRouter } from 'react-router-dom';
//2.比如使用点击事件
fun(){
    this.props.history.push('/*你的路由*/')
  }
export default withRouter (App);

Route forward goBac()

goback(){
      this.props.history.goBack()  
  }

Route rollback push()

go(){
      this.props.history.go(-1) 
  }

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement forward and backward in react-router. For more information, please follow other related articles on the PHP Chinese website!