[v6] When to use relative paths /?

[rwieruch]

In the documentation, I saw the following code snippet which confuses me regarding when to use relative paths and when not:

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
      <Route path=":teamId/edit" element={<EditTeam />} />
      <Route path="new" element={<NewTeamForm />} />
      <Route index element={<LeagueStandings />} />
    </Route>
  </Route>
  <Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
  </Route>
  <Route path="contact-us" element={<Contact />} />
</Routes>

Is it necessary to use / in the App's Layout Route? If it is not used, does the Teams Route need to change from teams to /teams? I concluded this, because the PageLayout Route does not use a path, but all nested routes use a relative path. However, then again I see contact-us which is not a nested route without a relative path. So when to use /?

[mjackson]

The / is necessary on the <App> route because it is supposed to render when the URL is /. The <Teams> route can use teams or /teams as its path since its parent route path is just /. They are the same path. If the parent route path was /app, the path could be either teams or /app/teams. Specifying a leading / means you must build the entire route path from the root including all its parent paths.

[alimertcakar]

Is there a benefit to using relative paths, or does react-router supports relative paths just as a nice feature?