React-router: composing routes

Let's say you are on route mysite.com/articles and the component page for this route has two links:

<Link to={'about'}>
<Link to={'/about'}>

What's the difference? The 1st link will forward to the subroute suffixed by the to argument (mysite.com/articles/about), while the 2nd link will forward to mysite.com/about.

Using <Link to={'about'}> without a leading slash is useful for going into subroutes that belong to the current route.

Of course, the routes have to be defined in your router:

<Routes>
  <Route index element={<Home />} />

  <Route path="articles" element={<Articles />}>
    <Route path="about" element={<AboutArticle />} />
  <Route />

  <Route path="about" element={<About />} />

  <Route path="*" element={<NotFound />} />
</Routes>