React Router V4中如何在特定路由下隐藏导航组件？

好问题！要实现“匹配除/path-without-nav之外所有路径”的需求，我们可以利用path-to-regex支持的否定前瞻断言（negative lookahead）来精准排除目标路径，结合React Router的Route组件就能轻松实现。

我会分两种常见场景给出方案：

场景1：仅精确排除/path-without-nav（允许其子路径） #

如果你只是不想在访问/path-without-nav时渲染Navigation，但它的子路径（比如/path-without-nav/profile）仍需要渲染组件，可以用这个表达式：

<Route 
  path="/(?!path-without-nav$).+" 
  render={() => <Navigation loggedInUser={loggedInUser} />} 
/>

表达式解释： #

• (?!path-without-nav$)：这是核心的否定前瞻断言，意思是“当前位置之后，不能是path-without-nav且直接到路径末尾”——精准排除了/path-without-nav这个精确路径
• .+：和你原来的示例保持一致，确保匹配斜杠后至少有一个字符的路径（不会匹配根路径/）

场景2：排除/path-without-nav及其所有子路径 #

如果需要连/path-without-nav的所有子路径（比如/path-without-nav/subpage、/path-without-nav/settings）一起排除，只需调整断言部分，判断路径后是否跟着斜杠或直接结束：

<Route 
  path="/(?!path-without-nav(/|$)).+" 
  render={() => <Navigation loggedInUser={loggedInUser} />} 
/>

表达式解释： #

• (?!path-without-nav(/|$))：断言路径后不能是path-without-nav直接结束，也不能是path-without-nav/（也就是子路径的开头），彻底排除了目标路径及其所有子路由

额外：匹配根路径/的情况 #

如果你希望根路径/也能渲染Navigation，可以把.+换成.*（匹配0个或多个字符），同时保留否定断言：

<Route 
  path="/(?!path-without-nav$).*" 
  render={() => <Navigation loggedInUser={loggedInUser} />} 
/>

注意事项： #

在React Router中，路由匹配是按顺序进行的，记得把这个全局匹配的路由放在所有更具体的路由之后，避免它提前拦截其他路由的匹配。

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