React Router v4 및 v5에서 중첩 경로를 어떻게 구성합니까?

React Router의 중첩 경로

React Router 버전 4 및 5에서 중첩 경로는 약간 다른 접근 방식을 사용합니다. 구성 요소를 다른 <구성 요소> 내에 배치합니다.

예를 들어 다음 중첩 경로 구성은

<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} />

다음과 같이 구성되어야 합니다.

<Route path="/" component={Frontpage} />
<Route path="/admin" component={Backend} />

이 <경로> 구성 요소를 사용하는 경우 이 예에서 설명한 것처럼 하위 경로를 상위 구성 요소의 하위 구성 요소로 정의할 수 있습니다.

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/about`}></Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/users`}></Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

이 수정된 구조를 통해 프런트엔드 구성 요소 내의 /home은 /에서 액세스할 수 있고 /admin/은 액세스할 수 있습니다. 백엔드 구성 요소 내의 홈은 /admin/home에서 액세스할 수 있습니다.

위 내용은 React Router v4 및 v5에서 중첩 경로를 어떻게 구성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!