How to realize the jump of page components by react

This article mainly introduces react how to achieve the page component jump, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Jump methods: 1, the use of Link tags, syntax "; 2, the use of push (), syntax" push ("jump address"); 3, the use of history (), syntax "this.props.history.goBack ();" and so on.

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

Several page (component) jump methods in React

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

It is generally applicable to click a button or other components to jump to the page. The specific usage is as follows:

Click to jump

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

React-router-redux contains the following functions, which are usually used in conjunction with redux:

Push-Jump to the specified path

Replace-replace the current location in the history

Go-the relative number of positions that move backward or forward in the history

GoForward-move one position forward. Equivalent to go (1)

GoBack-move one position backward. Equivalent to go (- 1)

When you use it, send disppatch to jump to the page:

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

3. Use history in RouteComponentProps for page fallback

It is usually used when you need to return to the previous page to complete an operation.

This.props.history.goBack ()

4. Open a new tab page and capture the path

First, define the route as:

Path: "/ pathname/:param1/:param2/:param3"

Click the event to jump to a new page to 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 path parameters:

Path?key1=value1&key2=value2const 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; ionization +) {arr = paramArr [I] .split ("=") If (arr! = null & & arr [0] = = paramName) {return arr [1];}} return "";} else {return "" }} Thank you for reading this article carefully. I hope the article "how to realize the Page component Jump" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!