반응 경로란 무엇입니까?

React 라우팅에는 다음이 포함됩니다. 1. 페이지 라우팅, "window.location.href='...'history.back()"과 같은 코드 2. h5 라우팅, "window.onchange = function () { console.log(window.location.hash)}"; 3. 해시 라우팅, "history.pushState(...)"와 같은 코드.

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

반응 경로는 무엇인가요?

Routing in React

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

yarn add React-router-dom

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

2. BrowserRouter 패키지

<browserrouter>
    <div>
        <route></route>
        <route></route>
    </div>
</browserrouter>

구성 요소는 이동할 라우팅 페이지를 수정하는 데 사용됩니다. 페이지 내용은 다음과 같습니다. Home 및 Detail은 두 개의 실제 구성 요소입니다.

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

http://localhost:3000/detail

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

경로 매개변수

점프 매개변수:

매개변수 수신 ：

this.props.match.params.id

결과를 인쇄하세요

3.

액세스 결과

http://localhost:3000/detail/3

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

라우팅 매개변수

점프 매개변수:

수신 매개변수:

this.props.location.search

인쇄 결과

?id=3. 직접 구문 분석해야 합니다

결과 액세스

http://localhost:3000/detail?id=3

4. 점프 원리

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

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

권장 학습: "

react 비디오 튜토리얼

"

위 내용은 반응 경로란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!