HTML <a href> 와 마찬가지로, <Link to> 및 <NavLink to> 는 상대 경로를 사용할 수 있으며, 중첩 경로에 대한 향상된 동작을 제공합니다.

다음과 같은 경로가 설정된 경우,

<Route path="home" element={<Home />}>
  <Route path="project/:projectId" element={<Project />}>
    <Route path=":taskId" element={<Task />} />
  </Route>
</Route>

다음과 같은 계층으로 컴포넌트를 렌더링하는 https://example.com/home/project/123 URL 을 고려해 보겠습니다.

<Home>
  <Project />
</Home>

<Project /> 가 아래의 링크를 렌더링하는 경우, 링크의 href 는 다음과 같이 확인됩니다.

첫 번째 .. 는 project/:projectId 경로의 두 세그먼트를 모두 제거합니다. 기본적으로, 상대 링크의 .. 는 URL 세그먼트가 아니라, route 계층 구조를 이동합니다. 다음 예제에서 relative="path” 를 추가하면, route 계층 구조 대신에 URL 세그먼트를 이동할 수 있습니다.

상대 링크는 항상 전체 URL 이 아니라 렌더링되는 route 계층 구조에 상대적 입니다. 즉, 사용자가 <Link to="abc"> 를 사용하여 /home/project/123/abc URL에서 <Task /> 로 더 깊이 탐색하는 경우, <Project> 의 href 는 변경되지 않습니다. (일반 <a href> 와 달리, client side routers 의 일반적인 문제).