반응 라우터 4.3에 중첩 된 서브 루틴이 효과적이지 않은 이유 와이 문제를 해결하는 방법은 무엇입니까?

반응 라우터 4.3 중첩 라우팅 구성 및 문제 조사에 대한 자세한 설명

React 라우터 4.3을 사용하여 응용 프로그램을 구축 할 때는 중첩 라우팅의 올바른 구성이 중요합니다. 이 기사는 일반적인 중첩 라우팅 실패 문제를 분석하고 효과적인 솔루션을 제공합니다.

/course/coursedetails /course/coursedetails/coursecatalog 둥지로 생각하지만 서브 루틴에 액세스 할 때 404 오류가 발생한다고 가정 해 봅시다. 이것은 일반적으로 exact 속성을 구성하는 상위 경로에 의해 발생합니다.

일반적인 오해를 분석합시다.

오류 구성의 예 :

app.js 의 상위 경로의 구성이 다음과 같습니다.

 // app.js
<route exact path="/course/coursedetails" component="{CourseDetails}"></route>

CourseDetails.js 구성 요소 내부의 서브 루틴 구성은 다음과 같습니다.

 // coursedEtails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

app.js 의 상위 경로는 exact 속성을 사용하므로 반응 라우터는 /course/coursedetails 경로와 정확하게 일치합니다. /course/coursedetails/coursecatalog 에 액세스 할 때, React 라우터는 부모 경로의 불완전한 일치로 인해 서브 루틴과 아래쪽으로 계속 일치하지 않아 404 오류가 발생합니다.

해결책:

솔루션은 간단합니다. 부모 경로에서 exact 속성을 제거하십시오.

올바른 구성의 예 :

app.js 에서 부모 경로 구성을 수정하십시오.

 // app.js
<route path="/course/coursedetails" component="{CourseDetails}"></route>

CourseDetails.js 의 서브 루틴 구성은 변경되지 않았습니다.

 // coursedEtails.js
<route path="/course/coursedetails/coursecatalog" component="{CourseCatalog}"></route>

exact 속성을 제거함으로써 React Router는 먼저 상위 경로 /course/coursedetails 과 일치 한 다음 하위 경로 /course/coursedetails/coursecatalog 와 계속 일치하여 하위 경로 구성 요소를 올바르게 만듭니다.

위의 분석 및 솔루션이 React 라우터 4.3에서 중첩 라우팅 고장 문제를 해결하는 데 도움이되기를 바랍니다. 경로가 케이스 일관성이 있는지 확인하고 구성 요소 이름이 라우팅 구성과 일치하는지 확인하십시오.

위 내용은 반응 라우터 4.3에 중첩 된 서브 루틴이 효과적이지 않은 이유 와이 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!