Блог

Главная - Вопросы по программированию - Объединение маршрутов с маршрутизатором React

Объединение маршрутов с маршрутизатором React

#javascript #reactjs #react-router-dom

#javascript #reactjs #react-router-dom

Вопрос:

У меня проблема с маршрутизатором React и подкачкой. Если я нахожусь в корне проекта и нажимаю на кнопку далее, он перейдет к mydomain.com/page/2 и так далее. Это правильно.

Но если я в mydomain.com/categories когда я нажимаю далее, он переходит к следующему mydomain.com/page/2 но затем, если я даю предыдущий или следующий, он начинает объединять маршруты в форме mydomain.com/page/2/page/1 / страница / 2 и так далее.

Таковы маршруты:

 <Route path="/categoria/:id/:slug/page/:page" exact>
  <Category />
</Route>
<Route path="/categoria/:id/:slug">
  <Category />
</Route>

В мой компонент разбивки на страницы я передаю в качестве реквизитов текущий URL-адрес, массив продуктов, полученных из api, текущую страницу и количество страниц:

 <Pagination baseurl={`${urlActual}/`} pagina={pagina} productos={productsByTag} pageCount={pageCount}/>

Что касается ссылок на кнопки внутри компонента разбивки на страницы, они сделаны следующим образом:

 pagina ? (
    <Link to={`${baseUrl}page/${Number(pagina) 1}`}>
      <button className="btn btn-primary">Next</button>
    </Link>
  ):(
    <Link to={`${baseUrl}page/2`}>
      <button className="btn btn-primary">Prev</button>
    </Link>
   )

Есть идеи, почему это может происходить?

Комментарии:

1. Откуда urlActual берется?

2. Да, пожалуйста, укажите, как вы вычисляете свой baseUrl , иначе urlActual . Похоже, вы просто добавляете свой текущий URL.

3. Я получаю это следующим образом: useLocation().pathname;

4. Мне пришлось добавить этот параметр, потому что в противном случае я был направлен на корневой путь

5. Итак, если значение pathname «/page/1» равно urlActual / baseUrl , а вы to={ ${baseUrl}page/2 } , как вы думаете, каким будет путь к отправке?