React Router切换Tab时URL的idTrain参数丢失如何解决？

问题核心原因 #

你点击标签页时的跳转逻辑未携带当前URL中的idTrain参数，导致跳转后参数丢失。你的路由配置本身符合要求，已为所有子标签页配置了带:idTrain的路径规则，仅需修正标签页跳转逻辑即可解决问题。

具体修复步骤 #

1. 获取当前页面的idTrain参数
   在TrainsDetailsScreen组件中通过react-router提供的useParams钩子获取当前路径中的idTrain：

import { useParams } from 'react-router-dom';

// 组件内部代码
const { idTrain } = useParams<{idTrain: string}>();

2. 修正标签页跳转逻辑
   跳转子路由时必须携带idTrain参数，可复用你项目中已有的generatePath方法生成正确路径：

// 标签切换处理函数，所有标签跳转都按这个逻辑实现
const handleTabChange = (tabKey: string) => {
  let targetRoute;
  switch(tabKey) {
    case 'lines':
      targetRoute = Routes.TrainsDetailsLines;
      break;
    case 'wheels':
      targetRoute = Routes.TrainsDetailsWheels;
      break;
    case 'service':
      targetRoute = Routes.TrainsDetailsService;
      break;
    default:
      targetRoute = Routes.TrainsDetails;
  }
  // 生成带idTrain参数的完整路径再跳转
  history.push(generatePath(targetRoute.path, { idTrain }));
}

3. 可选优化：改用嵌套路由减少重复代码
   如果后续不同路径需要对应不同组件，可将现有平级路由改为嵌套结构，简化路由配置代码：

// 外层路由管理器可简化为仅配置父路由，去掉exact属性
<ProtectedRoute
  requiredRoles={[ROLES.vehicleOperator, ROLES.vehicleAnalyst]}
  isAuth={isLogin}
  path={Routes.TrainsDetails.path}
  Component={TrainsDetailsScreen}
/>

// TrainsDetailsScreen组件内部嵌套渲染子路由
import { Switch, Route, useRouteMatch } from 'react-router-dom';

// 组件内部代码
const { path } = useRouteMatch();
return (
  <div>
    {/* 标签页组件放在此处 */}
    <Tabs onChange={handleTabChange} activeKey={currentTab}>
      <TabPane tab="概览" key="overview" />
      <TabPane tab="Lines" key="lines" />
      <TabPane tab="Wheels" key="wheels" />
      <TabPane tab="Service" key="service" />
    </Tabs>
    {/* 子路由渲染区域 */}
    <Switch>
      <Route exact path={path} component={TrainsOverview} />
      <Route path={`${path}/lines`} component={TrainsLines} />
      <Route path={`${path}/wheels`} component={TrainsWheels} />
      <Route path={`${path}/service`} component={TrainsService} />
    </Switch>
  </div>
)

完成以上修改后，所有子路由跳转都会携带idTrain参数，URL中不会再出现参数丢失的问题。

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