React-router not loading css for nested pages on refresh

Question

I\'m trying to setup a react-router for my first React webapp, it seems to be working except that the css doesn\'t load for my nested pages when I refresh the p

Answer 1

Your script is not loading your css due to the 404 errors. Your webserver is not redirecting all /components/* request to index file and then routing to your view via react.

But now, specifically about fixing your css issues... In the past, I've struggled with the css imports in jsx files, so you are not alone :) Instead, I've chosen to use SASS or LESS to compile my css to a bundle.css file with grunt or gulp. Then load that bundle.css directly on my index.html file. One neat trick about using css compilers is every time you change a .scss or .less file, your bundle.css will get updated.

Hope I pointed you in the right direction.

Cheers,