React Router v4/v5를 사용한 중첩 경로

중첩 경로를 사용하면 React 애플리케이션 내 탐색을 위한 계층 구조를 생성할 수 있습니다. React Router v4 및 v5에서는 및 구성 요소를 사용하여 이를 달성할 수 있습니다.

예제

애플리케이션을 프런트엔드로 나누고 싶은 다음 예를 고려해보세요. 및 관리 영역.

위의 예에서 첫 번째 정의는 프런트엔드 경로를 정의하고 두 번째 정의는 관리자 경로를 정의합니다. 각 경로는 해당 경로에 액세스할 때 렌더링되어야 하는 구성 요소와 연결됩니다.

고려 사항

React Router v4에서는 구성 요소를 중첩하지 않습니다. 대신 다른 내에 배치합니다. 예:

다음과 같아야 함:

그리고 Topics 구성 요소는 다음과 같이 정의됩니다.

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

이 구조를 사용하면 애플리케이션 라우팅에 대한 더 많은 유연성과 제어가 가능합니다.