Styles in the react application loading only after page refresh

Question

I am facing an issue with styles in my react application ie I have 2 components Home and Items. When the route happens form Home->Items the styles are not properly loaded. If I refresh the Items page then the styles get loaded. Also if I navigate directly to domainname.com/home/items the styles get loaded.

Answer 1

if you use next.js or setup code-splitting somehow (for SSR propose) ,this will happen. that's because of dynamic import and code-splitting.

if you use next.js this problem happens only in the development environment. when you build your app ( npm build ) and then run your app ( npm start ) this problem will be solved.

otherwise, if you don't use next.js, you have to consider your code-splitting method. ( react code splitting )