> 웹 프론트엔드 > JS 튜토리얼 > 반응에서 페이지 구성 요소 점프를 구현하는 방법

반응에서 페이지 구성 요소 점프를 구현하는 방법

青灯夜游
풀어 주다: 2021-11-30 10:05:02
원래의
11492명이 탐색했습니다.

점프 방법: 1. "" 구문의 Link 태그를 사용합니다. 2. "push("Jump address") 구문인 push()를 사용합니다. "; 3. History(), 구문 "this.props.history.goBack();" 등을 사용합니다.

반응에서 페이지 구성 요소 점프를 구현하는 방법

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

React의 여러 페이지(컴포넌트) 점프 방법

1. 페이지 점프를 달성하려면 반응 라우터 돔의 링크를 사용하세요.

일반적으로 페이지로 이동하기 위해 클릭 버튼이나 기타 컴포넌트에 적용할 수 있는 방법입니다.

<Link
    to={{
        pathname: &#39;/path/newpath&#39;,
        state: {  // 页面跳转要传递的数据,如下
              data1: {},
              data2: []
        },
    }}
>
   <Button>
        点击跳转
   </Button>
</Link>
로그인 후 복사

2. 페이지로 이동하려면 React-router-redux에서 push를 사용하세요.

react-router-redux에는 일반적으로 redux와 함께 사용되는 다음 기능이 포함되어 있습니다.

  • push - 지정된 경로로 점프
  • replace - 기록에서 현재 위치 바꾸기
  • go - 기록에서 상대적인 수의 위치를 ​​앞뒤로 이동
  • goForward - 한 위치 앞으로 이동합니다. go(1)
  • goBack과 동일 - 한 위치 뒤로 이동합니다. go(-1)

특별히 사용되는 경우 디스패치:

let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));
로그인 후 복사

3를 전송하여 페이지 점프를 수행합니다. RouteComponentProps의 기록을 사용하여 페이지를 롤백합니다.

일반적으로 일부 작업을 완료한 후 다음이 필요합니다. 이전 페이지로 돌아가려면 한 페이지에 사용됩니다.

this.props.history.goBack();
로그인 후 복사

4. 새 탭 페이지를 열고 경로를 가로채세요.

먼저 경로를 다음과 같이 정의하세요.

path: "/pathname/:param1/:param2/:param3",
로그인 후 복사

이벤트를 클릭하면 새 페이지로 이동하고 새 탭이 열립니다.

window.open(`pathname/${param1}/${param2}/${param3}`)
로그인 후 복사

에서 경로를 가져옵니다. 새 페이지 매개변수:

param1:  this.props.match.params.param1, 
param2:  this.props.match.params.param2, 
param3:  this.props.match.params.param3,
로그인 후 복사

경로 매개변수 가져오기:

path?key1=value1&key2=value2
로그인 후 복사
const query = this.props.match.location.search 
const arr = query.split('&')  // ['?key1=value1', '&key2=value2']
const successCount = arr[0].substr(6) // 'value1'
const failedCount = arr[1].substr(6) // 'value2'
로그인 후 복사

또는

function GetUrlParam(url, paramName) {
  var arr = url.split("?");

  if (arr.length > 1) {
    var paramArr= arr[1].split("&");
    var arr;
    for (var i = 0; i < paramArr.length; i++) {
      arr = paramArr[i].split("=");

      if (arr != null && arr[0] == paramName) {
        return arr[1];
      }
    }
    return "";
  }else {
    return "";
  } 
}
로그인 후 복사

권장 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 페이지 구성 요소 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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