@DavidWork

React как открыть карточку товара в новом окне браузера и не потерять данные?

Добрый день.
Стала задача при клике на кнопку подробнее карточка товара открывалась в новом окне браузера.
Но проблема в том что данные в новом окне теряются. И рендерится пустая страница.
Подскажите пожалуйста как решить данную проблему.
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 4
the_goldmayer
@the_goldmayer
Кот.
Я считаю это не очень хорошим подходом в использовании SPA.

Решение, думаю, записать нужные данные в localStorage перед тем, как открыть новую вкладку.

Подробнее о localStorage здесь.
Ответ написан
@kyzinatra
IndexDB если локально.
Если по хорошему, то данные с серва получать.
или можно Router юзать, но насколько я понимаю нужно будет в 1 вкладке все делать
Ответ написан
hzzzzl
@hzzzzl
react-router-dom
https://reactrouter.com/web/guides/quick-start

Стала задача при клике на кнопку подробнее карточка товара открывалась в новом окне браузера.

то есть что-то в духе
<a href="/item/item_name" target="_blank">Go to item</a>


и где-то в аппе отлавливать
<Route path='/item/:item_name' exact render={props => <ItemPage {...props} />} />


за современный синтаксис router-dom не отвечаю, уже времечко его не трогал
Ответ написан
@aidarDev
Устанавливаешь модуль react-router-dom

Создаёшь компонент странички товара.
Создаешь маршрут
<Route path="/products/:slug" component={Product} />

И твоя кнопка должна вести на этот адрес, примерно так: <Link to="/products/10">Подробнее</Link>
Link - компонент из react-router-dom, представляет собой обычный тэг <a></a>

Далее в компоненте товара фетчишь данные с бэкэнда по id товара. Id берешь из slug'а.

Чтобы получить slug - используй props.match.params.slug;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы