Маршрутизатор React не принимает идентификатор в Link

Question

Я работаю над проектом, который основан на Firebase и React JS, я хочу установить идентификатор в ссылке в компоненте маршрута, но он возвращает меня неопределенным, похоже, сначала страница списка тренеров, а затем редактировать тренера (в частности, ) Основной компонент Выглядит так, где я даю свои маршруты

<Route path= '/listOfTrainers' component={ListOfztrainers} />
<Route path='/editTrainer/:UID' component={EditTrainer} /> 

Затем есть страница со списком тренеров, где я показываю список тренеров в таблице. Один из столбцов в Редактировать профиль, где я даю ссылку, как показано ниже

Cell: <Link to= {`/editTrainer/${trainer.UID}`}>Edit</Link>

Когда я нажимаю на строку Редактировать профиль любого тренера, он возвращает мне неопределенное значение в URL

И когда я самостоятельно добавляю идентификатор, который является UID firebase в URL, он дает мне правильный результат, такой как

Я опускаю приведенный ниже код редактора Trainer,

componentDidMount(){
      const id = this.props.match.params.UID;
      console.log(id);
      firebase.database().ref(`Users/Trainers/` + id).on('value', (snapshot) => {
          var trainer = snapshot.val();
          this.setState ({
            trainer
          }, console.log(trainer))
      })
    }

Может кто-нибудь объяснить, что я делаю не так здесь в маршрутизации

Answer 1

, чтобы решить эту проблему, вам нужно убедиться, что ваши trainer данные извлечены и проанализированы на DOM правильно, например:

componentDidMount(){
      const id = this.props.match.params.UID;
      console.log(id);
      firebase.database().ref(`Users/Trainers/` + id).on('value', (snapshot) => {
          var trainer = snapshot.val();
          this.setState ({
            trainer
          }, console.log(trainer))
      })
    }


render() {
 let {trainer} = this.state;
 return (
    <>
    // in this way you can make sure that data parsed correctly on your dom elements
    {trainer && <Link to= {`/editTrainer/${trainer.UID}`}>Edit</Link>}
    </>

    )
}