React应用开发中何时应当使用nested routes？

你已经掌握实现方式的话，我直接列实际生产开发里高频用到嵌套路由的场景，都是实际开发踩坑总结的真实用法：

• 公共布局复用场景
  这是嵌套路由用得最多的场景。比如做后台管理系统、带固定导航的站点时，全站通用的侧边栏、顶部导航、全局页脚、全局消息提示容器这些组件不需要在每个业务页面重复编写，你只需要把这些通用部分写在父路由组件里，用<Outlet />标签占住内容渲染位，所有匹配到的子路由页面就会自动渲染到Outlet位置。
  这种写法除了少写重复代码，还有两个额外好处：一是切换子页面的时候父路由的布局组件不会重新挂载，布局里的状态（比如侧边栏折叠状态、全局播放器的播放状态）不会因为页面跳转重置；二是公共布局只需要渲染一次，相比每个页面单独引入布局组件性能更好。
• 带层级关系的资源类页面
  如果你的页面URL本身就对应有层级的业务资源，比如博客系统的/posts（文章列表）→/posts/:postId（单篇文章详情）→/posts/:postId/comments（文章评论区），电商系统的/category（分类列表）→/category/:cateId（分类下商品）→/category/:cateId/filter（筛选面板），用嵌套路由写逻辑会非常顺。
  父路由可以统一加载当前层级的公共数据，比如/posts/:postId的父路由可以提前请求对应ID的文章基础信息，下面的详情、评论、编辑等子路由直接复用这份数据就行，不用每个子页面都重复发一次相同的请求。同时这种路由结构天生和面包屑、侧边栏选中态的层级对应，不需要额外维护一套配置就能直接生成导航状态。
• 需要URL同步的页面内局部切换
  比如用户中心的标签页切换、文档站点的目录导航、列表页的筛选面板显隐这类页面内的交互，如果希望用户刷新页面后保留当前交互状态、或者能直接把当前视图的链接分享给其他人，就可以把这部分局部切换的逻辑做成嵌套路由。
  举个例子，用户中心下的「个人资料」「账号安全」「消息设置」三个标签，分别对应/user/profile、/user/security、/user/notify三个子路由，你不需要用本地state控制标签选中态，直接取当前路由匹配结果就能拿到选中状态，用户直接输入对应URL就能直达对应标签，体验比纯本地状态控制好很多。
• 路由级通用逻辑抽象
  如果某一整个前缀下的所有路由都有相同的拦截逻辑，比如/admin开头的所有页面都需要校验管理员权限、/workspace开头的所有页面都需要先加载当前用户的工作空间数据，你完全可以把这部分通用逻辑抽离到父路由组件里处理，所有子路由不需要单独重复写权限判断、重复加载公共数据，代码维护成本会低很多。

注意：不要为了用嵌套路由而硬套层级，如果两个页面完全没有公共布局、没有公共数据依赖、也没有逻辑上的层级关系（比如独立的登录页和站点首页），强行写成嵌套路由反而会增加无意义的组件层级，得不偿失。

内容的提问来源于stack exchange，提问作者karim shiro