React router Link with 'to' prop, поскольку объект не отображает правильный компонент

Question

У меня есть простое приложение с реактивным маршрутизатором v5. В компоненте приложения у меня есть такой переключатель:

<Switch>
  <Route path="/post">
    <Post />
  </Route>
  <Route path="*">
    <Error />
  </Route>
</Switch>

В другом компоненте у меня есть ссылка с таким путем:

<Link to={{ pathname: `/post?id=${message.id}`, state: { message } }}>text</Link>

Теперь компонент Error регистрирует только путь и состояние из useLocation (), компонент Post показывает путь в теге HTML.

Когда я нажимаю ссылку, визуализируемый компонент отображается как «Ошибка», это имя правильного пути console.log ('.post ? id = 123 '), и регистрирует правильное состояние. Адрес в браузере правильный, но компонент Post не отображается. Когда я обновляю браузер sh, отображается правильный компонент. Я имею в виду, что когда я обновляю sh, находясь в сообщении? Id = 123, отображается «Сообщение», но когда я пытаюсь щелкнуть ссылку, ведущую на «post? Id = 123», отображается «Ошибка». Если я использую без состояния маршрутизация работает нормально.

Вот codeanbox , похоже, проблема в этой части: to = {{pathname: '/post?id=${message.id}, состояние: {сообщение}}, когда я удаляю? id = $ {...}, он работает нормально. Но все же хотелось бы, чтобы этот id был там.

Answer 1

Кажется, мне не следует использовать строку запроса при использовании объекта в качестве параметра 'to'. Если кому-то нужно включить строку запроса, в объекте 'to' есть параметр поиска.