" 구문 2. push() 구문 사용, "push("Jump address")"; , 구문 "this.props.history.goBack();""/> " 구문 2. push() 구문 사용, "push("Jump address")"; , 구문 "this.props.history.goBack();"">
점프 방법: 1. "" 구문의 Link 태그를 사용합니다. 2. "push("Jump address") 구문인 push()를 사용합니다. "; 3. History(), 구문 "this.props.history.goBack();" 등을 사용합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
1. 페이지 점프를 달성하려면 반응 라우터 돔의 링크를 사용하세요.
일반적으로 페이지로 이동하기 위해 클릭 버튼이나 기타 컴포넌트에 적용할 수 있는 방법입니다.
<Link to={{ pathname: '/path/newpath', state: { // 页面跳转要传递的数据,如下 data1: {}, data2: [] }, }} > <Button> 点击跳转 </Button> </Link>
2. 페이지로 이동하려면 React-router-redux에서 push를 사용하세요.
react-router-redux에는 일반적으로 redux와 함께 사용되는 다음 기능이 포함되어 있습니다.
특별히 사용되는 경우 디스패치:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!