如何建立巢状路线？顶级还是组件级？

Question

我有以下路由方案

/tasks (Tasks Overview Page)
/tasks/:id (Task Detail Page)
/tasks/:id/:recordId (Single Task Page)

如果我经过nested route documentation at React Router，则实现看起来像这样

<Switch>
  <Route exact path="/">
    <TasksPage />
  </Route>
</Switch>

然后将通过以下方式实现TaskDetail页面

<Switch>
  <Route exact path={path}>
    <TaskList />
  </Route>
  <Route path={`${path}/:slug`}>
    <TaskDetail />
  </Route>
</Switch>;

然后，TaskDetail页面将进一步嵌套路由以显示单个任务页面。

但是，我个人认为最好在顶层记录所有路线，这样一个新开发人员进入该项目时就可以对应用程序中的所有路线进行概述。

我希望实施以下路由方案

<Switch>
  <Route exact path="/tasks">
    <TaskList />
  </Route>
  <Route path="/tasks/:taskId">
    <TaskDetailPage />
  </Route>
  <Route path="/tasks/:taskId/:recordId">
    <RecordDetailPage />
  </Route>
</Switch>;

详细架构是否以任何方式不正确？还是只是偏爱而已，我可以自由选择其中一种方式？