Question

我们来看看example

{/* NESTED ROUTES */}
  <Route path={`${match.url}/:topicId`} component={Topic}/>
  <Route exact path={match.url} render={() => (
  <h3>Please select a topic.</h3>
)}/>

嵌套路线工作正常。但是，如何在嵌套路径中嵌套路径？例如：

path={`${match.url}/:topicId/edit`} component={EditTopic}

是否有一个好/坏的练习指南，你会嵌套多少级别？任何提示/指导表示赞赏！

Answer 1

如何在嵌套路线中嵌套路线？

React Router v4鼓励您像其他任何组件一样考虑Route。它可以帮助您根据网址中发生的情况构建界面。

所以 - 对于嵌套Route或在组件树深处使用它们来修改界面以响应网址，你不应该感到奇怪。

在您的示例中，您可以在Route组件中或在作为Topic道具传递的函数中进一步嵌套render。

是否有一个好的/不好的练习指南，你会嵌套多少级别？

这是一个很好的问题。像许多其他东西一样，它归结为品味。在六个月的时间内，让您的代码易于理解为他人和您自己。

在某些情况下，采用旧式方法并将所有路径保留在一个组件中可能是最简单的。在其他情况下，最好使用四层嵌套。

在我的团队中，我们采用了v4并使用了几层嵌套。在此过程中，我们进行了大量的对话，以确保每个人都清楚这种方法。

警告：如果您使用深层嵌套，例如redux connect或者反应PureComponent，请注意这些可能阻止对嵌套Route的位置更新。当Route没有对网址中的更改做出响应时，您就会知道这种情况正在发生。使用withRouter来解决此问题。

Answer 2

您需要使用m match.url来构建嵌套路由，而不是使用atch.path。根据{{1}} documentation

路径 - （字符串）用于匹配的路径模式。用于构建嵌套的match

url - （字符串）网址的匹配部分。用于构建嵌套的<Route>s

React Router v4嵌套在嵌套组件中

2 个答案: