반응 경로란 무엇입니까?

1. 세 가지 공통 경로

(1) 페이지 라우팅

window.location.href='https://www.hao123.com/' history.back()

로그인 후 복사

(2) h5 라우팅

window.location = '#hash' window.onchange = function () { console.log(window.location.hash) }

로그인 후 복사

(3) 해시 라우팅

//推进一个状态 history.pushState('name','title','/path') //替换一个状态 history.replaceState('name','title','/path')

로그인 후 복사

2. React-Router 라우팅 소개

1. 라우팅 방법

: h5 라우팅

: 해시 라우팅

2. 라우팅 규칙

: 패키지 컴포넌트

3. 이유 옵션

: 일치 문제를 풀고 순서대로 일치하며 이전 것과 일치하면 일치하지 않습니다.

예: /path 및 path/list 순서대로 /path가 일치하므로 원하는 효과를 얻을 수 없습니다. 완전한 일치를 얻으려면 정확한 키워드를 추가해야 합니다.

4. 태그와 동일한 점프 탐색

: Link

5의 향상된 버전

: 클릭할 필요 없이 이 부분을 실행하면 자동으로 점프합니다

3. React-Router 사용

1. Import package

import {BrowserRouter, Route, Link} "react-router-dom";

2. BrowserRouter 패키지

• 경로: 라우팅 규칙 일치
• exact: 일치 효과를 수정합니다. 추가하면 정확한 일치를 의미하고 추가하지 않으면 퍼지 일치를 의미합니다. 예를 들어
• path={'/'}는 일치를 의미합니다: http://localhost:3000/, http:인 경우: // Localhost:3000/99는 일치할 수 없습니다
• path={'/detail/'}은 일치를 의미합니다: http://localhost:3000/detail/xxxxxxx, 후자는 제한되지 않으며 이전 일치는 괜찮습니다
3. 경로 값 전달

(1) 라우팅 매개변수 값 전달

경로 매개변수

점프 매개변수:

매개변수 수신 ：

결과를 인쇄하세요

액세스 결과

직접 사용 (2) 라우팅 매개변수 값 전달

점프 매개변수:

수신 매개변수:

인쇄 결과

결과 액세스

4. 점프 원리

링크의 to 매개변수가 경로의 경로 매개변수와 일치하면 점프합니다. 실행되면 Route의 컴포넌트에 설정된 컴포넌트로 점프합니다.

온라인 요약 사진이 이를 잘 설명합니다:

권장 학습: "

"