Reactでジャンプ値の転送を実装する方法

React ジャンプ値の転送方法: 1. "history.push" または "NavLink" を通じてページ ジャンプを実現します; 2. "this.props.history.push({pathname: 'login' ,query: { id: ...,name: ...}})this.props.history.push('modify')" は値で渡すことができます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react でジャンプ値の転送を実装するにはどうすればよいですか?

#反応プロジェクト ページのジャンプ/値の受け渡し

##1. Jump

##1.history.push Jump

Quote withRouter

• Export コンポーネントを使用する場合は、次を使用します

• import { withRouter } from 'react-router-dom'；
  
  class Header extends React.Component {
  
  }
  export default withRouter(Header);

2. NavLink ジャンプ

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

2. 値を渡す

1. ルート値 query/params

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

3. Props は値を渡します

親コンポーネント:

state = {
    collapsed: false,};render() {
    const { collapsed } = this.state;
    return (
        <Slider collapsed={collapsed}/>
    )}

子コンポーネント:

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

console。 log(this.props)

>>

以上がReactでジャンプ値の転送を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。