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

점프 방법: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!