Nested Subroutine이 React 라우터 4.3에서 효력을 발휘할 수없는 이유는 무엇입니까? 이 문제를 해결하는 방법?

반응 라우터 4.3 중첩 라우터 고장 및 솔루션

React 라우터 4.3을 사용하여 중첩 경로를 구축 할 때 종종 서브 루틴이 제대로 작동 할 수없는 문제가 발생합니다. 이 기사는 사례 분석을 사용하고 효과적인 솔루션을 제공합니다.

문제 설명 :

사용자는 /course/coursedetails 페이지에 탭 메뉴를 추가하여 메뉴를 클릭하여 다른 내용을 전환하기를 희망합니다. Access /course/coursedetails 는 정상이지만 /course/coursedetails/coursecatalog 로 전환 할 때 404 오류가 발생했습니다. 사용자는 부모 및 자식 경로의 exact 속성을 제거했지만 부모 구성 요소는 라우팅 변경에 응답하지 않았습니다.

Code example:

app.js (라우팅 구성) :

<route component="{Course}" path="/course"></route>

CoursedEtails.js (subrouting configuration) :

<route component="{CourseDetails}" path="/course/coursedetails"></route>
<route component="{CourseCatalog}" path="/course/coursedetails/coursecatalog"></route>

문제 분석 및 해결책 :

문제의 근본 원인은 React 라우터 4.3의 라우팅 매칭 메커니즘에 있습니다. 상위 경로에 exact 속성이 설정되면, 자식 경로 경로가 일치하더라도 부모 경로가 먼저 일치되어 자식 경로가 효과적이지 않습니다. exact 속성이 제거 되더라도 경로 정의가 올바르지 않으면 문제가 발생할 수 있습니다.

해결책:

1. 부모 경로의 exact 속성 제거 (존재하는 경우) : 부모 경로 ( /course )<route></route> 구성 요소에는 exact 속성이 없습니다. 이를 통해 상위 경로가 더 긴 경로와 일치 할 수 있으므로 어린이 경로가 제대로 작동 할 수 있습니다.

2. 경로 정의 순서 조정 순서 : 부모 경로 후에 자식 경로가 정의되어 있는지 확인하십시오. 정의 된 순서로 라우터 일치하는 반응.

수정 된 코드 예 :

app.js : (예제에 exact 속성이 없기 때문에 수정이 필요하지 않음)

<route component="{Course}" path="/course"></route>

CoursedEtails.js : (자녀 경로가 부모 경로 후에 정의 된 경우 수정이 필요하지 않습니다)

<route component="{CourseDetails}" path="/course/coursedetails"></route>
<route component="{CourseCatalog}" path="/course/coursedetails/coursecatalog"></route>

문제가 지속되면 다음을 확인하십시오.

• 경로는 정확합니다. 경로 경로의 철자와 사례를 다시 확인하십시오.
• 구성 요소 가져 오기 : Course , CourseDetails , CourseCatalog 구성 요소가 올바르게 가져 오는지 확인하십시오.
• 구성 요소 : 사용되는 경우<switch></switch> 구성 요소, 부모 경로 후에 자식 경로가 정의되어 있는지 확인하십시오.<switch></switch> 첫 번째 일치하는 경로 만 일치시킵니다.

위의 조정을 통해 /course/coursedetails/coursecatalog 경로는 404 오류를 피하기 위해 올바르게 작동해야합니다. 문제가 지속되면보다 자세한 분석을 위해 완전한 코드 스 니펫을 제공하십시오.

위 내용은 Nested Subroutine이 React 라우터 4.3에서 효력을 발휘할 수없는 이유는 무엇입니까? 이 문제를 해결하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!