Как получить доступ к параметрам при прохождении маршрута

Question

Я пытаюсь получить параметры в URL моего реагирующего приложения в структурированном виде. У меня есть параметры с именами id1 и id2, и их можно увидеть вот так

console.log("this.props.location.search", this.props.location.search)

URL с параметрами будет связан так:

<a href="compare/?id1=6bf45ef0-962e-11e9-923e-972a9f2b848f&amp;id2=58e82e60-961d-11e9-ae32-47571549c9a2">
    <button class="ui yellow button">
       Comparison
    </button>
</a>

Я нашел такие решения, как

this.props.location.query.id1

this.props.match.params

но this.props.match.params пустые и this.props.location.query не существует

Кроме того, я проверил, чтобы установить некоторые вещи в маршруте. Но следующее вылетает все приложение, просто показывая пустой экран

      <Route exact path="/compare(/:id1)(/:id2)" component={Compare} />

Если я сделаю

      <Route exact path="/compare/:id1?/:id2?" component={Compare} />

Приложение снова работает, показывая параметры как неопределенные

match:
  isExact: true
  params:
    id1: undefined
    id2: undefined

Answer 1

Я думаю, проблема в том, что вы смешиваете свои параметры URL со строкой запроса.

В вашем href должно быть что-то вроде этого:

<a href="compare/6bf45ef0-962e-11e9-923e-972a9f2b848f/58e82e60-961d-11e9-ae32-47571549c9a2">
  <button class="ui yellow button">
      Comparison
  </button>
</a>

Ваш маршрут будет выглядеть так:

<Route exact path="/compare/:id1/:id2" component={Compare} />

В вашем Compare компоненте вы сможете получить доступ к своим параметрам с помощью this.props.match.params.id1 и this.props.match.params.id2 и отправить запрос на сервер, который произведет сравнение со строкой вашего запроса.

Попробуйте и дайте мне знать, если это поможет.