> 웹 프론트엔드 > JS 튜토리얼 > React Router v4/v5에서 중첩 경로를 만드는 방법은 무엇입니까?

React Router v4/v5에서 중첩 경로를 만드는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-01 11:10:30
원래의
360명이 탐색했습니다.

How to Create Nested Routes in React Router v4/v5?

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

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

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

<Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />
로그인 후 복사

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

고려 사항

React Router v4에서는 구성 요소. 대신 다른 내에 배치합니다. 예를 들면 다음과 같습니다.

<Route path="/topics" component={Topics} />
로그인 후 복사
로그인 후 복사

다음과 같아야 합니다.

<Route path="/topics" component={Topics} />
로그인 후 복사
로그인 후 복사

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

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic} />
  </div>
);
로그인 후 복사

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

위 내용은 React Router v4/v5에서 중첩 경로를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿