Как правильно сделать подгрузку данных на страницу React-приложения?

Question

[AndreyParfenov]

Всем привет.
Обучаюсь реакту, в процессе создаю интернет-магазин. Возникла проблема, связанная с получением данных с сервера. Есть header, в котором список. При клике на элемент списка происходит подгрузка данных и редирект:

const listCategoriesHandler = (elObj, menuItems) => {

        history.push(CLOTHES_PAGE_ROUTE + '/' + menuItems.catName + '/' + menuItems.catName + '/' + elObj.replace(/, | /g, '_'));
        fetchCategory([menuItems.catName, elObj.replace(/, | /g, '_')]).then((data) => {
            products.setProducts(data);
        });
    }

Попадая на страницу, проблем никаких не возникает. Однако если перезагрузить страницу, естественно она становится пустой. Я нашел путь решения, получив путь в window.location.pathname и подгружая с помощью него необходимое. Но понятно это решение стремное, да и ненадежное.
Как вообще решают подобный вопрос обычно?

Comments

[Вадим]

https://reactrouter.com/

Answer 1

[DrWeyber]

Используй useEffect для такого

Comments

[AndreyParfenov]

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

[DrWeyber]

Вы используете react-router? Если да то вам нужно из location доставать айдишники продукта, и делать запрос в юз эффекте

[AndreyParfenov]

DrWeyber, Понял, спасибо за ответ