React Router路由渲染异常：添加exact属性后模态框无法正常使用

问题根因与解决方案 #

1. 核心错误点 #

• 路由配置顺序错误，React Router 为前缀匹配规则，更具体的路由需要放在优先级更高的位置，你当前将父级路由${adminBase}/users/:id放在子路由前面，会优先匹配父级路由，导致子路由不触发。
• UserTransactions 路由的动态参数写错，你写的是静态id而非动态参数:id，导致只有路径为/users/id/userTrans时才会匹配，真实带用户ID的路径无法命中。
• 跳转 UserTransactions 的路径拼接错误，你写的${params.id}/userTrans会在当前路径后额外拼接用户ID，生成错误路径如/users/123/123/userTrans。
• 给父级路由加exact后模态窗失效，是因为模态窗路径为${adminBase}/users/:id/editUser，加了exact后只有完全匹配父级路径才会渲染DriverPage，模态窗的路径无法命中父级路由，DriverPage 不渲染，内部的模态窗逻辑自然失效。

2. 修复步骤 #

第一步：调整路由配置，修正路径并调整顺序

// 更具体的子路由放在前面
<Route path={`${adminBase}/users/:id/userTrans`} component={UserTransactions}/>
// 父级路由放在后面，不需要加exact
<Route path={`${adminBase}/users/:id`} component={DriverPage}/>

第二步：修正跳转UserTransactions的Link路径

<Link to={{
  // 推荐写绝对路径避免相对路径拼接错误
  pathname: `${adminBase}/users/${params.id}/userTrans`,
  // 也可以用相对路径简化写法：pathname: "userTrans"
  state: {
   userId: params.id
  }
}}>
 <Btn>Все транзакции пользователя</Btn>
</Link>

修改完成后无需加exact属性，即可同时满足两个需求：

• 点击跳转按钮可以正常渲染UserTransactions组件
• 打开模态窗的逻辑不受影响，正常弹出模态窗

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