React-router-v6 nested route only renders main route

Im trying to use a nested router for a todo list. I have categories and i want to navigate to the category by id. What i tried is :

<Routes>
   <Route path={"/todolist"} element={<TodoCategories />}>
   <Route path={":id"} element={<TodoList />} />
</Route>

And i also tried this ;

<Routes>
   <Route path={"/todolist/*"} element={<TodoCategories />}>
     <Route path={":id"} element={<TodoList />} />
   </Route>
 </Routes>

Url is changing in browser like ;

http://localhost:3000/todolist/development

But the TodoList element is not rendering. Only TodoCategories element is rendering. I tried some solutions but not working. Thanks for helps.

>Solution :

You are on path "/todolist/development" but this doesn’t match either of the paths in the routes, "/todolist" or "/:id".

The second path should be "/todolist/:id" if you want to match and render on "/todolist/development".

<Routes>
  <Route path={"/todolist"} element={<TodoCategories />}>
  <Route path={"/todolist/:id"} element={<TodoList />} />
</Route>