반응에서 중첩 라우팅 이해

이 튜토리얼은 React 라우터를 사용하여 React 응용 프로그램의 중첩 라우팅을 보여줍니다. 우리는 개념과 구현을 설명하기 위해 간단한 웹 사이트를 구축 할 것입니다.

중첩 노선 이해

코드에 뛰어 들기 전에 웹 사이트의 구조를 살펴 보겠습니다. 기본 탐색에는 홈페이지, 대시 보드 및 제품 섹션에 대한 링크가 포함됩니다. 홈과 대시 보드에는 간단한 경로가 있습니다 (, ). 그러나 제품 섹션은 더 나은 조직을 위해 중첩 경로를 사용합니다. 제품 섹션 내에는 제품 목록 검색, 제품 목록보기, 신제품 추가 및 개별 제품 세부 정보를 보는 경로가 있습니다. 이 중첩 경로는 아래에 구성되며 ,

및 . 프로젝트 설정 우리는 폴더로 구성된 구성 요소와 함께 프로젝트 구조를 사용합니다. 다음 파일을 만듭니다.

, /home (/dashboard 폴더에서) /products , /products/add, /products/all, /products/search,

(

폴더 내에 모두). 반응 라우터 설치 필요한 패키지를 설치하십시오

app.js

에서 경로 구현

파일에는 기본 라우팅 구성이 포함됩니다. 먼저 필요한 구성 요소를 가져옵니다 :

• 다음으로 Home.js 구성 요소 내의 경로를 정의하십시오 Dashboard.js components의 중첩 경로가 경로의 어린이로 정의되는 방법에 주목하십시오. 이것은 중첩 된 구조를 만듭니다. 경로의 매개 변수는 제품 ID를 기반으로 동적 라우팅을 허용합니다. 동적 경로 및 데이터 가져 오기
• 구성 요소는 Products.js 매개 변수를 기반으로 데이터를 가져와야 할 것입니다. 이 매개 변수에 액세스하려면 의 AddProduct.js 후크를 사용할 수 있습니다. 예제 데이터를 실제 데이터 가져 오기 메커니즘으로 바꾸는 것을 잊지 마십시오. ProductsList.js 결론 SingleProduct.js ProductSearch.js 이 튜토리얼은 React에서 중첩 라우팅의 실질적인 예를 제공합니다. 경로를 신중하게 구조화하면 잘 조직되고 유지 관리 가능한 React Application을 만들 수 있습니다. 완전한 소스 코드 (간결성에 포함되지는 않지만)는 특정 요구에 맞게 조정 및 확장 할 수 있습니다. 보다 고급 기능 및 옵션에 대해서는 React 라우터 문서를 참조하십시오. components/products

위 내용은 반응에서 중첩 라우팅 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!