Как при клике получить данные с апи и сразу после этого задиректиться на другой роут?
Здравствуйте, у меня есть компонент(роут) который в componentDidMount подгружает с апи список категорий и мне надо при клике на любую категорию чтобы я сначала получал элементы этой категории и меня перебрасывало на другой роут. А я могу сделать ТОЛЬКО ЧТО-ТО ОДНО: либо использовать компонент Link для перехода на нужный мне роут НО тогда Я НЕ СМОГУ ПОЛУЧИТЬ ДАННЫЕ ПРИ КЛИКЕ, либо не использовать Link а вместо него типо тег button при клике на который я могу вызвать метод который мне получит данные и закинет на тот роут, но тогда я не смогу туда перейти, лишь только в командной строке сменить ссылку на тот роут(тогда естественно все работает). Пробовал сделать при клике на button > вызвать метод который получает данные > redirect не сработало. Как решают эту проблему в современном мире? Надеюсь суть вопроса понятна.
А зачем это делать обязательно при клике? Засуньте свой метод вызова в componentDidMount и все будет работать при переходе на нужный вам роут. Какой смысл сначала получить список?
Если прям это очень нужно, хотя хз зачем, то делаете обычный элемент, при клике на него вешаете запрос и в .then проверяете, пришли ли данные, если пришли, то делаете history.push()
я просто хотел сделать отдельный роут в котором с апи подгружается список всех доступных категорий и при клике на елемент категории я должен брать значение этой категории > посылать запрос на сервер > и меня должно перекидать на еще один в роут в котором будут отображается ети данные :D вот так)
Павел Диденко, сделал в cdmount как и вы посоветовали (работает но не всё), не подскажите как фиксить когда в this.props.match.params.name попадают значения со слешом ( / ), типо того: Other/Unknown, Milk / Float / Shake, все элементы категории которые имеют слеш: отказываются давать запрос на сервер(проверял в chrome devTools Network) Все остальные типо Homemade Liqueur, Beer которые без слеша работают отлично.
Роман, ну на самом деле все просто, вам нужно контролировать, что попадает в параметр match, а также следить за роутами.
Например, если базовый URL у вас /Milk, а дочерний у него задан как /Milk:id, то Float и будет тем самым параметром id и так далее. Следите за порядком роутов, от этого тоже все зависит.
Или скиньте пример в песочницу, чтобы было проще вам помочь.
Совет на будущее - не допускайте в URL заглавных букв, только строчные
Ну я и говорю, все просто. Твой роутер настроен так:
Покажи страницу по пути /category/:name с параметром exact - и он показывает и все работает. Exact означает, что тебе тот компонент будет отображаться только на этом адресе
Но ты идешь на страницу в глазах роутера /category/:name/:second и это совершенно другая страница под которую у тебя нет роута, а чтобы она работала, нужно сделать под нее роут и поставить его до роута categories/:name, т.к. роутер у тебя это конструкция свитч.
И напоследок - поработай над чистотой кода - очень сложно воспринимать.
Пройди курс на udemy от Юрия Бура - там код стайлинг гуд, а также погугли airbnb стайл гайд
Я убрал exact и у меня другие роуты заработали (со слешами) но начали выскакивать ошибки:
×
Unhandled Rejection (SyntaxError): Unexpected end of JSON input
, А как сделать роут /category/:name/:second и приклеить к /category/:name ?( сори я не знаю как это сделать:( ) // или где можно это посмотреть?
Роман, гуглите react router dom документацию, или статьи какие. А вообще судя по ошибке проблема ещё с JSON данными.
И ещё - вам не нужно приклеивать роут для :second просто к name, его нужно сделать отдельно и поставить в коде до роута с name
Простой