Как настроить динамическую маршрутизацию c с помощью React Router на основе полученных реквизитов?

Question

Я создал приложение для ведения блога в реакции JS и хотел бы изменить путь URL при переходе к статье блога. Однако я сталкиваюсь с проблемой при использовании '/: id' в Route with React Router Dom.

Пример при переходе по этим двум URL-адресам:

Blog article URL:
https://website.com/myfirstblogpost/4582819

Profile page URL:
https://website.com/profile/902310

Приложение. js setup

<Route path="/:id/:id" component={BlogArticle} exact={true} />
<Route path="/profile/:id" component={Profile} exact={true}/>

При этой настройке моя статья в блоге отображается как на маршруте статьи блога, так и на профиле. Как мне исправить эту проблему? Можно ли сделать рендеринг маршрута, например:

<Route path=`{/${blog.title}/${blog.id}}` component={BlogArticle} exact={true} />
<Route path=`{/profile/${user.id}`component={Profile} exact={true}/>

Если да, то как, если нет, какие есть другие решения? Обратите внимание, что по причинам SEO заголовок статьи блога должен отображаться сразу после первого '/', например website.com/blogarticle

Большое спасибо, ребята!

С уважением,

Frido

Answer 1

Необходимо сделать два изменения:

Первое: Поскольку «профиль» жестко запрограммирован, вам нужно поменять ордер и поставить его на первую позицию:

<Route path="/profile/:id" component={Profile} exact={true}/>
<Route path="/:id/:id" component={BlogArticle} exact={true} />

Таким образом, React Router сначала будет искать эти «жестко запрограммированные» URL-адреса, а затем проверять переменные.

Второй: Вы не можете иметь два равных аргумента в вашем URL, если они разные (первый - строка, вероятно, слаг. второй - целое число). Поэтому вам нужно изменить его следующим образом:

<Route path="/profile/:id" component={Profile} exact={true}/>
<Route path="/:title/:id" component={BlogArticle} exact={true} />

Это может помочь!