Home > Article > Web Front-end > How to implement jump value transfer in react
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.
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
Quote withRouter2. NavLink jump
- Export When using components, use
import { withRouter } from 'react-router-dom'； class Header extends React.Component { } export default withRouter(Header);
import { NavLink } from "react-router-dom";
<navlink>修改密码</navlink>
this.props.history.push({
pathname: 'login',
query: {
id: 3231,
name: 3231
}})this.props.history.push('modify')
this.props.match.query.id // 3231 this.props.match.params.name // 3231
<pre class="brush:php;toolbar:false">state = {
collapsed: false,};render() {
const { collapsed } = this.state;
return (
<slider></slider>
)}</pre>
<pre class="brush:php;toolbar:false">componentDidMount(){
// console.log(this.props)
const { pathname } = this.props.location if( pathname ) {
this.setState({
selectedKeys:this.props.location.pathname })
}}</pre>
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!
