请查看上一篇关于路线的帖子：
https://dev.to/kibetamos/react-router-31oa
我们一直在使用小到可以完全在单个文件中呈现的路由器。但是随着应用程序范围的扩大，拆分路由器并将路由写入更靠近编写相关 UI 逻辑的位置会很有用。
让我们回到我们的技术文章网站示例，假设工程团队正在构建一个类别功能，该功能将按类别组织技术新闻文章——前端、后端、移动开发等。除了类别组件（其中将呈现指向每个单独类别的链接），团队创建了一个类别视图，该视图将显示给定类别的所有文章。
以前，我们可能写过这样的路由器：
// In the top level App component <Router> <Route path={'/categories/:categoryName'}> <Category /> </Route> <Route path={'/categories'}> <Categories /> </Route> {/* Other Routes */} </Router>
这种路由方式没有任何问题，但是一旦您开始在应用程序中引入更多功能，您可能会发现将所有路由包含在单个路由器中变得有点笨拙。解决这个问题的方法是熟悉嵌套在应用程序中的组件的渲染路由。
例如，考虑 Categories 组件，它遍历类别列表并为每个类别创建链接：
function Categories ({ categories }) { return ( <ul> { categories.map(category => <li> <Link to={`/categories/${category}`}> {category} </Link> </li> ) } </ul> ); };
单击此组件呈现的链接将导致 URL 更改，例如更改为 /categories/html。根据我们之前定义的Router，路由’/categories/:categoryName’将会匹配，Category组件将会渲染。
请注意，Categories 组件的代码并未指明当用户单击某个类别链接时将呈现哪个组件（它是 Category 组件）。我们必须导航回定义路由器的顶级 App 组件文件，以便查看当 URL 更改为 /categories/html 时将呈现 Category 组件。这种因果分离并不理想。
因为 React Router 动态处理路由（例如，路由在渲染时就存在），所以您可以在应用程序中的任何位置渲染 Route。在这种情况下，我们可以将呈现单个 Category 组件的 Route 重新定位到 Categories 组件中，其中定义了指向该路由的链接
import { Link, Route } from 'react-router-dom' function Categories ({ categories }) { return ( <div> <ul> { categories.map(category => <li> <Link to={`/categories/${category}`}> {category} </Link> </li> ) } </ul> <Route path={'/categories/:categoryName'}> <Category /> </Route> </div> ) }结果，可以简化顶层路由器：
// In the top level App component <Router> {/* The Category route has been removed. */} <Route path={'/categories'}> <Categories /> </Route> {/* Other Routes */} </Router>
以这种方式重写你的路由，使得当用户点击一个链接时会发生什么变得非常明显。它还允许我们通过删除单个类别的路由来清理我们的顶级路由器。以这种方式拆分路由也使应用程序更高效，因为路由并不总是被渲染。相反，路由仅在 UI 逻辑需要时才会呈现。
原文： https://dev.to/kibetamos/nested-routes-react-router-2m54