Как сфомировать диманические react router ссылки в функциональных компонентах?

Question

[Егор Довыденко]

Есть компонент вывода перечня товаров по категориям.
По клику на товар из перечня (Categories) получаю и передаю в другой (Product) компонент prodID товара и через GraphQL загружаю данные только этого товара.
Приложение строго на функциональных компонентах.

Ниже кусок кода для большего понимания:

<Router>
          <Switch>
            <Route exact path='/'>
              <Categories />
            </Route>
            <Route path='/product/'>
              <Product prodID={prodID} />
            </Route>
          </Switch>
      </Router>

Так всё работает ок, но при перезагрузке страницы отдельного товара ошибка - логично, ведь переданный в компонент id брать неоткуда.
В связи с этим вопрос - как через React Router организовать корректную работу таких ссылок?

Answer 1

[beDenz]

Это плохая практика так передавать id. Передавайте его в урле, то есть '/product/{id}'. Плюс это хорошо для seo

Comments

[Иван Дербенченко]

Seo на Reacte? Я думал что он не пригоден для seo, разве что в связке с NextJS ....