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>
   <button>
        点击跳转
   </button>

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 <p> Recommended Study: "<a href="https://www.php.cn/course/list/21.html" target="_blank">react video tutorial</a>"</p>

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!