React Router 5.2.0中Switch同时渲染两个路由的问题如何解决？

问题出在你的Switch组件结构上：Switch的直接子元素是div.privateContent，而非Route组件。

React Router 5的Switch逻辑是只遍历自身的直接子元素，判断是否为匹配的Route或Redirect，找到第一个匹配项后就停止渲染。但你当前的结构里，Switch会直接渲染整个div，而div内部的两个Route会各自独立进行路径匹配——/games/new会同时匹配/games/new和/games/:id（因为:id会把new当作动态参数），所以两个组件都会被渲染。

解决方法 #

把div.privateContent移到Switch外层，让Switch的直接子元素仅为Route组件：

<div className="privateContent">
  <Switch>
    <Route exact path="/games/new">
      <PrivateRoute isLogged={loggedIn}>
        <CreateGame />
      </PrivateRoute>
    </Route>
    <Route exact path="/games/:id">
      <PrivateRoute isLogged={loggedIn}>
        <ShowGame />
      </PrivateRoute>
    </Route>
  </Switch>
</div>

如果需要给每个路由的内容单独包裹该div，也可以把div放到PrivateRoute内部或者每个Route的子节点里，核心原则是保证Switch的直接子元素只能是Route或Redirect组件。

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