React Router v4/v5에서 중첩 라우팅을 구현하는 방법은 무엇입니까?

React Router v4/v5를 사용한 중첩 라우팅

React Router는 React 애플리케이션 내에서 중첩 경로를 생성하기 위한 강력한 메커니즘을 제공합니다. 이를 통해 경로를 모듈화하고 복잡한 탐색 구조를 생성할 수 있습니다.

React Router v4에서 중첩 경로를 생성하려면 상위 경로를 정의하고 그 안에 하위 경로를 지정해야 합니다. 예를 들어 앱을 프런트엔드와 관리 섹션으로 분리하려면 다음과 같이 하세요.

<code class="jsx"><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} /></code>

그러나 React Router v4에서는 경로가 다른 경로 내에 중첩되지 않는다는 점에 유의하는 것이 중요합니다. 대신 하위 경로가 상위 구성 요소 내부에 배치됩니다. 따라서 위 코드는 다음과 같이 변환됩니다.

<code class="jsx"><Route path="/" component={Frontpage} /></code>

이 상위 구성 요소 포함:

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2>Frontend</h2>
    <Link to={`${match.url}/home`}>Home</Link>
    <Link to={`${match.url}/about`}>About</Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);</code>

마찬가지로 관리 섹션의 경우:

<code class="jsx"><Route path="/admin" component={Backend} /></code>

함께 이 상위 구성 요소는 다음과 같습니다.

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2>Admin</h2>
    <Link to={`${match.url}/home`}>Dashboard</Link>
    <Link to={`${match.url}/users`}>Users</Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

이 접근 방식을 사용하면 애플리케이션의 다양한 섹션에 대한 경로 정의와 UI 렌더링을 모두 캡슐화하는 재사용 가능한 모듈식 구성 요소를 만들 수 있습니다.

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