How to implement jump value transfer in react-Front-end Q&A-php.cn

How to implement jump value transfer in react

藏色散人

Release： 2023-01-09 10:17:00

Original

2377 people have browsed it

React jump value transfer method: 1. Realize page jump through "history.push" or "NavLink"; 2. Through "this.props.history.push({pathname: 'login' ,query: {id: ...,name: ...}})this.props.history.push('modify')" can be passed by value.

How to implement jump value transfer in react

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

How to implement jump value transfer in react?

react project page jump/pass value

##1. Jump

##1. history.push jump

Quote withRouter
Export When using components, use
import { withRouter } from &#39;react-router-dom&#39;；

class Header extends React.Component {

}
export default withRouter(Header);
Copy after login
2. NavLink jump

import { NavLink } from "react-router-dom";
<NavLink to="/modify">修改密码</NavLink>

Copy after login

2. Pass value

1. The route passes the value query/params

this.props.history.push({
    pathname: &#39;login&#39;,
    query: {
        id: 3231,
        name: 3231
    }})this.props.history.push(&#39;modify&#39;)

Copy after login

2. The route passes the value to get the parameters

this.props.match.query.id // 3231
this.props.match.params.name // 3231

Copy after login

3. Props pass value

Parent component:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">state = { collapsed: false,};render() { const { collapsed } = this.state; return ( <Slider collapsed={collapsed}/> )}</pre><div class="contentsignin">Copy after login</div></div>

Child component:

componentDidMount(){
    // console.log(this.props)
    const { pathname } = this.props.location    if( pathname ) {
        this.setState({               
            selectedKeys:this.props.location.pathname        })
    }}

Copy after login

console.log( this.props)




# Recommended study:《 react video tutorial》
The above is the detailed content of How to implement jump value transfer in react. For more information, please follow other related articles on the PHP Chinese website!

How to implement jump value transfer in react

##1. Jump

##1. history.push jump

2. Pass value

1. The route passes the value query/params
this.props.history.push({ pathname: 'login', query: { id: 3231, name: 3231 }})this.props.history.push('modify')
Copy after login

2. The route passes the value to get the parameters
this.props.match.query.id // 3231 this.props.match.params.name // 3231
Copy after login

3. Props pass value

How to implement jump value transfer in react

##1. Jump

##1. history.push jump

2. Pass value

1. The route passes the value query/paramsthis.props.history.push({ pathname: &#39;login&#39;, query: { id: 3231, name: 3231 }})this.props.history.push(&#39;modify&#39;)Copy after login

2. The route passes the value to get the parametersthis.props.match.query.id // 3231 this.props.match.params.name // 3231Copy after login

3. Props pass value

1. The route passes the value query/params
this.props.history.push({ pathname: 'login', query: { id: 3231, name: 3231 }})this.props.history.push('modify')
Copy after login

2. The route passes the value to get the parameters
this.props.match.query.id // 3231 this.props.match.params.name // 3231
Copy after login