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

I know its a bit old thread, but ill share my solution here. Its a solution for setup that uses webpack instead create-react-app.

I found every other solution suggests to change the path in the html file. But like in my case webpack handles the asset linking.

I faced the same problem today. Routes like /some_route works but - /some_route/second_level it doesn't, leaving behind a message in console stating -

Refused to apply style from 'http://localhost:8080/some_route/some_style.css'.

I fixed this problem by updating my webpack.config.js file

output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/',         ////// <-- By adding this line
}

Hope it helps someone. Thanks!