반응 라우팅의 일반적인 구성 요소는 다음과 같습니다. 1. BrowserRouter, 라우팅 모드를 해시로 설정, 3. NavLink, 6. 리디렉션; , 등.
이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
구성 요소 및 해당 기능:
Components | Function | |
---|---|---|
라우팅 모드 | BrowserRouter | 컨벤션 모드는 다음과 같습니다. 히스토리, HTML5 사용 UI와 URL 동기화를 유지하기 위해 제공되는 히스토리 API |
라우팅 모드 | HashRouter | 합의된 모드는 해시이며, URL 해시를 사용하여 UI와 URL 동기화를 유지합니다 |
선언적 점프 | NavLink | 선언적 점프는 경로 활성화 상태에 동의할 수도 있습니다 |
선언적 점프 | Link | 선언적 점프에는 활성화 상태가 없습니다 |
Redirect | Redirect | Redirect~~replace |
경기 | Route | 구성 요소를 일치시키고 구성 요소를 표시합니다. 즉, 매칭이 성공한 후 해당 컴포넌트는 즉시 매칭 컴포넌트인 |
Exclusive Matching | Switch | Exclusive Matching으로 대체됩니다. 포괄성을 사용하지 않으려면 Switch를 사용하세요. |
고차 컴포넌트 | withRouter | 라우팅을 통해 전환되지 않는 컴포넌트에서는 기록, 위치 및 일치 객체를 props 객체에 전달합니다(고차 컴포넌트) |
구조
BrowserRouter|HashRouter
App(또는 기타 구성 요소)
BrowserRouter
Property | Type | Function |
---|---|---|
basename | string | 모든 위치의 기본 URL입니다. 앱이 서버의 하위 디렉터리에서 제공되는 경우 해당 앱을 하위 디렉터리로 설정해야 합니다. 올바른 형식의 기본 이름은 슬래시로 시작해야 하지만 슬래시로 끝나서는 안 됩니다. |
getUserConfirmation | Function |
window.confirm 탐색을 확인하는 데 사용되는 함수입니다. 기본적으로 | 를 사용합니다.
Route
Attributes | Type | Function |
---|---|---|
path | string |object | 경로 일치 경로입니다. 경로 속성이 없는 경로는 항상 일치합니다. |
exact | boolean | 은 true이며 전체 경로 일치(/home)가 필요합니다. 경로는 기본적으로 "포함"됩니다(/ 및 /home 일치). 이는 여러 경로가 동시에 일치되고 렌더링될 수 있음을 의미합니다 |
comComponent | Function |comComponent | React 구성 요소는 다음과 같은 경우에만 작동합니다. 주소 일치가 렌더링되고 경로 prop도 함께 렌더링됩니다 |
render | Function | 인라인 렌더링 및 패키징 구성 요소, 대상 구성 요소를 반환하려면 호출이 필요함 |
Link
Attributes | Type | Function |
---|---|---|
to | string | Object {pathname:,search:,hash:} | 점프할 경로 또는 주소 |
replacement | boolean | 기록 교체 여부 |
NavLink
Attributes | Type | Function |
---|---|---|
to | string|개체{경로 이름:,검색:, hash:} | 점프할 경로 또는 주소 |
replace | boolean | 기록 레코드 교체 여부 |
activeClassName | string | 요소 선택 시 선택 스타일을 기본값으로 설정 값이 활성 상태입니다 |
activeStyle | object | 요소가 선택되면 선택한 스타일을 설정하세요 |
Switch
이 구성 요소는 일치하는 주소의 첫 번째 경로 또는 리디렉션을 렌더링하는 데 사용됩니다. 하나의 경로, 배타적 라우팅, 기본 전체 일치(시나리오: 사이드바, 가이드 탭 등)만 렌더링합니다.
이 구성 요소는 주소와 일치하는 첫 번째 경로 또는 리디렉션을 렌더링하는 데 사용되며 하나의 경로, 독점 경로, 기본 전체 일치(시나리오: 사이드바 및 이동 경로, 부팅 탭 등 | ||
역할 |
from
to고 푸시 | 푸시 | |
---|---|---|
exact | boolean | |
sensitive | boolean | |
[관련 권장 사항: | Redis 비디오 튜토리얼 | ]
위 내용은 반응 라우팅의 공통 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!