How to correctly load data into a React application page?

Question

React

Hello.
I'm learning React, creating an online store in the process. There was a problem getting data from the server. There is a header containing a list. When you click on a list item, the data is loaded and redirected:

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);
        });
    }

Getting to the page, no problems arise. However, if you reload the page, naturally it becomes empty. I found the solution path by getting the path in window.location.pathname and loading the necessary using it. But it is clear that this solution is dumb, and unreliable.
How do they usually solve such a question?

Answer 1

Use useEffect for this