React路由使用exact属性仍渲染多组件的问题求助

这个问题我之前也碰到过——核心原因是在React Router v5里，即使加了exact属性，动态参数路由（比如/app/participants/:participantID）还是会把register当成合法的参数值匹配，导致两个组件同时渲染。不过不用改路径，用下面的方法就能解决：

最推荐的方案：用Switch组件包裹路由 #

React Router的Switch组件会遍历所有子路由，只渲染第一个匹配到的路由。只要把更具体的固定路径路由放在动态路由前面，就能优先匹配到/app/participants/register，避免动态路由误匹配。

React Router v5 代码示例： #

import { Switch, Route } from 'react-router-dom';

// 在你的路由配置中替换成下面的写法
<Switch>
  {/* 更具体的固定路径放在前面 */}
  <Route exact path="/app/participants/register" component={ParticipantRegistration}/>
  {/* 动态路由放在后面 */}
  <Route exact path="/app/participants/:participantID" component={ParticipantDetailed}/>
</Switch>

React Router v6 代码示例： #

如果你已经升级到v6，Switch被Routes组件替代，而且v6默认就只会渲染第一个匹配的路由，连exact属性都不需要了：

import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path="/app/participants/register" element={<ParticipantRegistration />} />
  <Route path="/app/participants/:participantID" element={<ParticipantDetailed />} />
</Routes>

为什么原来的exact没用？ #

在v5中，exact只是要求路径完全匹配，但/app/participants/register和/app/participants/:participantID的完整路径结构是一致的——:participantID可以匹配任意字符串（包括register），所以两个路由都会被判定为"完全匹配"，导致同时渲染。而Switch会终止后续的匹配，解决了这个问题。

备选方案：手动过滤动态参数（不推荐） #

如果因为某些原因不能用Switch，可以在动态路由里用render属性手动检查参数值，避免渲染错误的组件：

<Route 
  exact 
  path="/app/participants/:participantID" 
  render={({ match }) => {
    // 如果参数是register，就不渲染组件
    if (match.params.participantID === 'register') {
      return null;
      // 或者重定向到注册页：return <Redirect to="/app/participants/register" />;
    }
    return <ParticipantDetailed />;
  }}
/>

不过这种方法需要为每个冲突的参数值写判断逻辑，如果你有很多类似冲突，维护起来会很麻烦，所以还是优先用Switch/Routes方案。

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