React Router - CSS Styling BREAKS using params? - Status 304 Not Modified?

Question

Please help. I have everything working fine, signup page works fine and so does the sign in page. However, when I go to a url route /user/3 for instance, it breaks my custom CSS styling page put in the public directory of my react/redux app. The My stylesheet is no longer being read at all. Only the bootstrap styles.

When I look at the network tab in chrome dev tools, on my other routes stylesheet is getting sent with status 200, but when I try to access a route with a slash, ie /user/4, stylesheet gets sent as 304 Not Modified...

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={App}></IndexRoute>
      <Route path="/user/:user" component={UserDashboard}></Route>
      <Route path="/signup" component={Signup} />
      <Route path="/signin" component={Signin} />
    </Route>
  </Router>
  ,
  document.getElementById('root')
);

Answer 1

I have the same problem and I solve it changing the link to my css file.

It was:

<link rel="stylesheet" href="./css/materialize.min.css">

And the solution are: (remove first dot, and all runs OK)

<link rel="stylesheet" href="/css/materialize.min.css">

Maybe you problem was other... but I have the same problem that you.

Answer 2

304 is because of the browser cache. You can clear the cache through the settings of the browser or use Ctrl + F5 （windows）/ Command + R (MacOS) to force a refresh. Then try it again.

Answer 3

Its best to start the URL with a / so it returns the URL you intended instead of its parent or child.

If the URL that you are browsing is http://localhost:3000/user/johnny then you would end up with the following links based on whether you have a forward slash or not in your href.

href="/css/bootstrap.min.css" becomes http://localhost:3000/css/bootstrap.min.css

href="./css/bootstrap.min.css" becomes http://localhost:3000/user/johnny/css/bootstrap.min.css