Реагировать на маршруты Dynami c маршруты не генерируются, как ожидалось

Question

Я использую React-router-DOM и веб-пакет в моем проекте. Когда пользователь нажимает на определенную ссылку, основанную на дате и идентификаторе, он переносит их на другую страницу.

Мои маршруты:

 <Switch>
  <Route path="/" exact render={Home} />
  <Route exact path="/surveys/:date" render={Main} />
  <Route path="/surveys/:date/:id" render={Survey} />
  <Route render={() => <h1>404: page not found</h1>} />
</Switch>

Я хочу, чтобы путь выглядел следующим образом surveys/june/123 и отлично работает с первого клика. Но проблема в том, что когда пользователь загружает другой опрос с боковой панели, вместо URL-адреса меняется на surveys/june/124, он меняется на surveys/june/123/124, а после этого он меняется на surveys/june/123/125 и так далее. Например, первый загруженный идентификатор всегда остается в URL.

Я пробовал:

<Link to={`${match.url}/${id}`} />

и path-to-regexp

const setPath = compile(match.path);
const newPath = setPath({
      ...match.params,
      id: id,
});

и ни один из них не работает. Что я делаю не так?

Answer 1

match.url содержит параметры, а match.path не содержит параметров.

Сделайте это

<Link to={`/${match.path}/${match.params.date}/${id}`} />

https://reacttraining.com/react-router/core/api/match

путь - (строка) Шаблон пути, используемый для сопоставления. Полезно для построения вложенных s

url - (строка) Соответствующая часть URL. Полезно для построения вложенных s

Answer 2

потому что вы получаете соответствующий URL каждый раз. в первой попытке вы сказали «реагировать», чтобы взять соответствующий URL и добавить к нему идентификатор. Если мы предположим, что {match.url} дает нам «survey / june», а затем мы анализируем для него id: Затем мы получаем опрос / june / 123, но при повторном нажатии на ссылку на боковой панели {match.url} дает нам «опросы» / june / 123 'вместо' survey / june ', который вы снова анализируете, чтобы идентифицировать, что в итоге даст результат, который вы получите. Надеюсь, для вас очевидно, что простым решением является использование ссылки следующим образом:

<Link to={`surveys/${date}/${id}`} />