[react-router] something weird when using splats in nested path

[codeleeks]

here's my routes working well.

const routes = [
  {
    path: '/',
    element: <Root />,
    children: [
      {
        index: true,
        element: <Prologue />,
        loader: postsLoader,
      },
      {
        path: 'posts/*',
        element: <Post />,
        loader: postContentsLoader,
      },
      {
        path: 'snippets',
        children: [
          {
            index: true,
            element: <Snippets />,
            loader: snippetsLoader,
          },
          {
            path: 'snippets/*', //this looks weird
            element: <Snippet />,
            loader: snippetContentsLoader, 
          },
        ],
      },
    ],
  },
]

const router = createBrowserRouter(routes)

export default function BlogRouterProvider() {
  return <RouterProvider router={router} />
}

i first tried the "snippets/*" path using just path: "*".

{
  path: '*', 
  element: <Snippet />,
  loader: snippetContentsLoader, 
},

and i tested with the url snippets/abc/def/123
but it turned out that the splat field in the param in the loader was snippets/abc/def/123.
the parent path("snippets") was included, which i think is weird.
because the place where the splat was used is in the "snippets" path. i thought the splat should be like abc/def/123

To work it out, i needed to add "snippets" in the child path before the asterisk.

{
  path: 'snippets',
  children: [
    {
      index: true,
      element: <Snippets />,
      loader: snippetsLoader,
    },
    {
      path: 'snippets/*', //this looks weird because i already have written 'snippets' at the parent path.
      element: <Snippet />,
      loader: snippetContentsLoader, 
    },
  ],
},

i think that this working code is not that straightforward and it might require us to write some duplicate strings if the parent has several child path.

i would like to listen to all your opinions. kindly add your comment.

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.26.2",
"react-router-dom": "^6.26.2",