能否多个不同Link跳转至同一个React Route组件且不修改Link标签？

以下方案均不需要修改Link标签的to属性，可直接适配你当前的代码结构：

方案1：调整路由匹配规则（最简洁） #

直接修改现有/iframe路由的路径配置，支持匹配/iframe开头的所有路径，无需额外逻辑：

// 修改前
<Route exact path="/iframe" component={FirstPHP} />
// 修改后（React Router v5适用）
<Route path="/iframe" component={FirstPHP} />
// 如果需要严格避免匹配更深层的非目标路由，也可以用带可选参数的写法
<Route exact path="/iframe/:id?" component={FirstPHP} />

说明：移除exact属性后，所有以/iframe开头的路径都会匹配到该路由，自然加载FirstPHP组件，你也可以在组件内通过props.match.params.id获取到链接里的后缀参数做业务区分。

方案2：添加重定向规则（地址栏最终显示为/iframe） #

如果要求跳转后地址栏必须是/iframe而非带后缀的路径，可以在Switch中新增重定向规则：

<Context.Provider value={[context, setContext]}> 
  <Switch> 
    {/* 新增重定向规则，放在原有/iframe路由前面 */}
    <Route exact path="/iframe/:id" render={() => <Redirect to="/iframe" />} />
    <Route exact path="/iframe" component={FirstPHP} /> 
    <Route exact path="/r/4" component={FourthPage} /> 
  </Switch> 
</Context.Provider>

说明：所有/iframe/xxx格式的路径会先命中重定向规则，自动跳转到/iframe，加载目标组件。

方案3：拦截点击事件手动跳转（不修改路由配置） #

如果不想调整路由配置，可以给对应的Menu.Item添加点击拦截逻辑：

// 先引入导航hook（React Router v5用useHistory，v6用useNavigate）
import { useHistory } from 'react-router-dom'

// 组件内获取history实例
const history = useHistory()

// 给目标Menu.Item添加onClick属性
<Menu.Item key="13" onClick={(e) => {
  e.preventDefault()
  history.push('/iframe')
}}>
  <Link to="/iframe/1">PHP 3</Link>
</Menu.Item>
<Menu.Item key="14" onClick={(e) => {
  e.preventDefault()
  history.push('/iframe')
}}>
  <Link to="/iframe/2">PHP 4</Link>
</Menu.Item>
<Menu.Item key="15" onClick={(e) => {
  e.preventDefault()
  history.push('/iframe')
}}>
  <Link to="/iframe/3">PHP 5</Link>
</Menu.Item>

说明：阻止Link的默认跳转行为，手动调用导航方法跳转到目标路由，完全不需要修改Link的to属性。

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