Webpage built with React, React Router and Tailwind CSS

Do you think assigning a class with useEffect to change the webpage background depending on current location is a good practice? How would you do it differently? Do you have any suggestions according components/functions naming or folder structure in this project? Is it okay to keep the data for navLinks in an array directly in component function (like in MainNavbar component) or should I put this somewhere else?