반응으로 점프 값 전송을 구현하는 방법

藏色散人
풀어 주다: 2023-01-09 10:17:00
원래의
2352명이 탐색했습니다.

React 점프 값 구현 방법: 1. "history.push" 또는 "NavLink"를 통해 페이지 점프를 구현합니다. 2. "this.props.history.push({pathname: 'login',query: { id: .. .,name: ...}})this.props.history.push('modify')"는 값으로 전달될 수 있습니다.

반응으로 점프 값 전송을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 점프 값 전송을 구현하는 방법은 무엇입니까?

react 프로젝트 페이지 점프/값 전송

1. 점프

1,history.push 점프

  • quote withRo uter
  • 컴포넌트를 내보낼 때
  • 를 사용하세요.
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, 전달 값 쿼리/params

this.props.history.push({
    pathname: &#39;login&#39;,
    query: {
        id: 3231,
        name: 3231
    }})this.props.history.push(&#39;modify&#39;)
로그인 후 복사

2, 매개 변수를 가져오기 위한 전달 값 전달

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        })
    }}
로그인 후 복사
하위 구성 요소:
rrreee


console.log(this.props)반응으로 점프 값 전송을 구현하는 방법

추천 학습: "react 비디오 튜토리얼

"🎜

위 내용은 반응으로 점프 값 전송을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!