How to use link jump in react

How to use link jump in react: 1. Carry invisible parameters through Link jump, and then use "this.props.location.query" to get the passed parameter object; 2. Carry through Link jump Explicit parameters, then use "this.props.match.params.id" to get the parameters.

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

How to use link jump in react?

Link jump in React

Link jump carries invisible parameters:

<Link to={{
            pathname: &#39;agent-openservice/&#39;,
            query:{
               shop_id:row.shop_id,
               merchant_id:row.merchant_id
            }
         }} />

The passed parameter object can be obtained through this.props.location.query

Disadvantages: Page refresh routing is lost, parameters are lost

Advantages: Can carry multiple parameters

Link jump carries explicit parameters

<Link to={{pathname: &#39;agent-openservice/&#39; + shopId, }} />

Mounted Routing path:

<Route path="agent-openservice/:id">

Parameters can be obtained through this.props.match.params.id

Advantages: Refreshing the page will not lose parameters

Disadvantages: Only one parameter can be passed

Recommended learning: "react video tutorial"

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