Как заставить досягаемость маршрутизатора (в Gatsby) перезагружать страницу при повторном переходе на текущий активный маршрут?

У меня ситуация примерно такая:

<Link to="products" state={{ category: "all" }}>All Products</Link>
<Link to="products" state={{ category: "lawnmowers" }}>Lawnmowers</Link>
<Link to="products" state={{ category: "saddles" }}>Saddles</Link>

Идея состоит в том, что в зависимости от того, на какую ссылку нажимает пользователь, я бы отфильтровал продукты, чтобы отображалась только эта категория. Я достаточно доволен простотой использования этого решения и, в идеале, не хотел бы его менять.

Это отлично работает, когда я нахожусь на другом маршруте, например. Я в /about и нажимаю ссылку "Газонокосилки", я получаю страницу, полную газонокосилок. Однако, если я нахожусь на пути /products, нажатие любой другой ссылки, которая также ведет к самому /products, просто ничего не дает. Сайт не обновляется, состояние не меняется, и Гэтсби или Рич как-то блокируют это.

Есть ли способ обойти или отключить это поведение и каким-то образом заставить Гэтсби перезагрузить / повторно отрендерить страницу?


reactjs gatsby reach-router
person user8145466    schedule 14.11.2020    source источник
comment
Почему вы хотите перезагрузить страницу? Это хреново для пользователя. Может быть, вместо этого стилизуйте ссылки на текущую страницу по-другому, чтобы пользователь знал, что происходит, и не нажимал на них?   -  person coreyward    schedule 14.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

React повторно отображает страницу при изменении свойств или состояния.

если я нахожусь на маршруте / products, щелчок по любой другой ссылке, которая также ведет к / products, просто ничего не делает

Это означает, что ни свойства, ни состояние не меняются из-за того, что вы находитесь на одном маршруте ?! Тогда ты не получишь ререндер. Если я ошибаюсь, перефразируйте и уточните свой вопрос.

Одно из возможных решений: щелкнув ссылку, вы также активируете функцию, изменяющую состояние. Это означает, что вам придется отказаться от лаконичного ‹Link ... /› и вместо этого реализовать целый ряд кода управления состоянием. Но нет никакого пути, если вы фильтруете, изменяя состояние.

Используйте перехватчики React useState для изменения состояния и useEffect для применения изменения состояния. Используйте navigate маршрутизатора Reach Router, чтобы инициировать изменение состояния.

person EliteRaceElephant    schedule 15.11.2020