React router v4 防止匹配子路由

Question

我遇到 React Router v4 Switch 组件的问题。我很惊讶我找不到与此问题相关的线程。一个普通的 Switch 看起来像这样：

<Switch>
  <Route path='/path1' component={Path1Component}/>
  <Route path='/path2' component={Path2Component}/>
  <Route exact path='/' component={Home}/>
  <Route component={NotFound}/>
</Switch>

这意味着当我在路径“/”上时，我得到一个 Home 组件，在“/path1”上我得到一个 Path1Component，在路径“/foobar”上我得到一个 NotFound 组件。这很好

然而，当我在“/path1/foobar”路线上时，我也得到了 Path1Component。这种行为并非在所有情况下都是正确的——这次我不希望“/path1”路由有任何嵌套路由。 '/path1/foobar' 应该得到一个 NotFound 组件，任何字符串，在 '/path1' 之后带有 '/' 或不带都应该 return NotFound 组件。

这个问题的首选解决方案是什么？我可以将 exact 添加到每个路径，但这不会使代码膨胀吗？我觉得这应该是默认的，但事实并非如此。

甚至在 React Router v4 文档上，例如 here。我看到了这个问题 - 这里 '/will-match/foo' 也将匹配。你觉得呢？你有没有什么想法？

Answer 1

有一个讨论 here，但简而言之：它会破坏现有代码。如果这要改变，如果你想在不做 'path1/child1'.

的情况下匹配子路由，你必须做 exact={false}

React router v4 防止匹配子路由

React router v4 prevent matching child routes

javascript

router

nested

switch-statement

reactjs