How to implement page component jump in react

Jump method: 1. Use the Link tag, the syntax ""; 2. Use push(), the syntax "push(" to jump Transfer address ")"; 3. Use history(), syntax "this.props.history.goBack();" etc.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

Several page (component) jump methods in React

1. Use the Link in react-router-dom to achieve page jump

Generally applicable to clicking buttons or other components to jump to the page. The specific usage is as follows:

<Link
    to={{
        pathname: &#39;/path/newpath&#39;,
        state: {  // 页面跳转要传递的数据，如下
              data1: {}，
              data2: []
        },
    }}
>
   <Button>
        点击跳转
   </Button>
</Link>

2. Use push in react-router-redux to jump to the page

react-router-redux contains the following functions, which are generally used in conjunction with redux:

• push - jump to the specified path
• replace - replace the history record Current Position
• go - Move a relative number of positions backward or forward in history
• goForward - Move one position forward. Equivalent to go(1)
• goBack - move one position backward. Equivalent to go(-1)

When used specifically, page jump is performed by sending dispatch:

let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));

3. Use the history in RouteComponentProps to perform page rollback

Generally used when completing a certain operation and needing to return to the previous page.

this.props.history.goBack();

4. Open a new tab page and intercept the path

First define the route as:

path: "/pathname/:param1/:param2/:param3",

Click the event to jump to the new page Open a new tab:

window.open(`pathname/${param1}/${param2}/${param3}`)

Get the parameters on the path on the new page:

param1:  this.props.match.params.param1, 
param2:  this.props.match.params.param2, 
param3:  this.props.match.params.param3,

Get the path parameters:

path?key1=value1&key2=value2

const query = this.props.match.location.search 
const arr = query.split('&')  // ['?key1=value1', '&key2=value2']
const successCount = arr[0].substr(6) // 'value1'
const failedCount = arr[1].substr(6) // 'value2'

or

function GetUrlParam(url, paramName) {
　　var arr = url.split("?");

　　if (arr.length > 1) {
　　　　var paramArr= arr[1].split("&");
　　　　var arr;
　　　　for (var i = 0; i < paramArr.length; i++) {
　　　　　　arr = paramArr[i].split("=");

　　　　　　if (arr != null && arr[0] == paramName) {
　　　　　　　　return arr[1];
　　　　　　}
　　　　}
　　　　return "";
　　}else {
　　　　return "";
　　}　
}

Recommended Study: "react video tutorial"

The above is the detailed content of How to implement page component jump in react. For more information, please follow other related articles on the PHP Chinese website!