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 중국어 웹사이트의 기타 관련 기사를 참조하세요!