Блог

У меня есть URL-путь: путь: ‘/trains/:idTrain’, где idTrain передается в качестве реквизита в обработчике onClick, а idTrain также отображается на экране.

Основной и начальный экран имеют путь выше, но когда я нажимаю, например, вкладку «Строки», он по-прежнему отображает idTrain, как, например, ниже «TLK12345», но он исчезает из URL. Вот как это выглядит при первоначальном рендеринге:

И как только я нажимаю на любую вкладку, например «Линии», это похоже на :

Вот функция, как создается маршрут initail:

 const handlePushToTrainsDetails = (trainId: string) =gt; {  getTrainsDetailsData(trainId);  history.push(  generatePath(Routes.TrainsDetails.path, {  idTrain: trainId,  })  );  };  

как я должен реализовать это, чтобы idTrain всегда присутствовал в URL-адресе ?

вот маршруты:

 TrainsDetails: {  path: '/trains/:idTrain',  name: 'Trains details',  viewName: 'TRAINS_DETAILS',  },  TrainsDetailsLines: {  path: '/trains/:idTrain/lines',  name: 'Trains details lines',  viewName: 'TRAINS_DETAILS_LINES',  },  TrainsDetailsWheels: {  path: '/trains/:idTrain/wheels',  name: 'Trains details wheels',  viewName: 'TRAINS_DETAILS_WHEELS',  },  TrainsDetailsService: {  path: '/trains/:idTrain/service',  name: 'Trains details service',  viewName: 'TRAINS_DETAILS_SERVICE',  },  

и вот диспетчер маршрутизации:

 lt;ProtectedRoute  requiredRoles={[  ROLES.vehicleOperator,  ROLES.vehicleAnalyst,  ]}  isAuth={isLogin}  path={Routes.TrainsDetails.path}  Component={TrainsDetailsScreen}  exact  /gt;  lt;ProtectedRoute  requiredRoles={[  ROLES.vehicleOperator,  ROLES.vehicleAnalyst,  ]}  isAuth={isLogin}  path={Routes.TrainsDetailsLines.path}  Component={TrainsDetailsScreen}  exact  /gt;  lt;ProtectedRoute  requiredRoles={[  ROLES.vehicleOperator,  ROLES.vehicleAnalyst,  ]}  isAuth={isLogin}  path={Routes.TrainsDetailsWheels.path}  Component={TrainsDetailsScreen}  exact  /gt;  lt;ProtectedRoute  requiredRoles={[  ROLES.vehicleOperator,  ROLES.vehicleAnalyst,  ]}  isAuth={isLogin}  path={Routes.TrainsDetailsService.path}  Component={TrainsDetailsScreen}  exact  /gt;  

Функция generatePath ниже :

 export function generatePathlt;S extends stringgt;(path: S, params?: ExtractRouteParamslt;Sgt;): string;  

позже компонент для каждого пути будет отличаться

Спасибо!