Как правильно настроить маршрутизацию для товаров?
Доброго времени суток:)
Запихал сразу три вопроса сюда.
Недавно начал копаться в React.Т.к. на данный момент я самоучка с низким пониманием технологий, до redux, BFF и пр. не дошёл. В пользовании только React. Первый вопрос:
Как правильно настроить маршрутизацию?.
У меня есть файл routes.js, где прописаны публичные и приватные роуты.
В публичных объекты с страницами(путь, элемент-компонент, exact).
Так вот. Меня интересует, как сделать автоматический переход для определенного товара.
Например, на странице с товарами есть карточки с товарами. Обычный проход по массиву через map создание этих самых карточек. Через react router dom вешаем Link to"path" на картинку. Так вот. Как я понимаю, нужно чтобы для каждого товара был свой путь. Его можно прописать в массиве с объектами, по которому мы пробегаемся через map, а далее достать {game.path} и поместить в Link to.Верно?Но при всём при этом нужно же ещё и создать объект с товаром в routes.js.А делать это вручную не вариант. Как лучше это сделать? Второй вопрос:
В некоторых моментах использую кастомный хук useHover, то бишь передаём ref.current и добавляем слушатели события на движение по элементу.Думаю, ребята поопытнее знают.
Так вот. Приходится создавать в функциональных компонентах много ref и вешать на разные элементы, далее создавать много const isHovering(ref), чтобы получать булевское значение и после обрабатывать. Понимаю, что этот подход - кривой и косой.Как можно сделать декомпозицию такого кода? Третий вопрос:
Примерно такой же вопрос по поводу создания состояния через useState();
const [isVisible, setIsVisible] = useState(false);
Допустим, есть 5 элементов, которые должны открываться при нажатии.
через onClick={(()=>isVisible ? setIsVisible(false) : setIsVIsible(true))} и далее через инлайн стили делаем махинации с элементами в зависимости от true / false.
Так вот, нужно обязательно прописывать по 5 состояний в фукнц. компонентах и вешать на каждый из элементов разные?Например, isVisible1, isVisible2,isVisible3,isVisible4,isVisible5.
Работать, то оно работает...Но, думаю, стоит переделать эти костыли.
Как быть в этом случае?
Его можно прописать в массиве с объектами, по которому мы пробегаемся через map, а далее достать {game.path} и поместить в Link to.Верно?
-- Да, верно
Если коротко, то вы делаете один роут с path="/tovari/:id"
Все урлы вида "/tovati/111", "tovari/moytovar" попадут в этот роут
В компоненте вы можете получить id с помощью const { id } = useParams();
или напрямую из window.location.href
2. Скорее всего никак. На все ховеры реагирую через css и вам советую :)
3. Очень сложно сказать, не зная кода этих компонентов. Кажется, что можно в HOC вынести логику показа после клика, но я не уверен
