Nested routes | Remix | Page 1

whole nova Sep 7, 2022, 9:38 AM

#

I wanted to have the structure where /tasks shows 2 tabs 'My tasks' and 'All Tasks'. So I can have 2 nested routes /tasks/mytasks and /tasks/alltasks for them. Until here everything works well and the nesting is helping with the layout. However, If I click on a task, I want it to have its own page at /tasks/mytasks/:taskId where the layout is no more there. In order to do this, I should not be adding /tasks/mytasks/:taskId as a nested route right? Since it will render the layout as well which I don't want. So should I be adding /tasks/mytasks/:taskId as another route completely?

river ivy Sep 7, 2022, 2:05 PM

#

correct. tasks.$taskId.tsx

proper forge Sep 7, 2022, 2:32 PM

#

you can conditionally render the layout for tasks.tsx depending on if $.taskId is present or rearrange the route structure a tad
/tasks/myTasks
/tasks/allTasks
/task/:taskId //singular task url route gets you a different layout

#Nested routes