CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
user7024499
user7024499

Reputation: 961

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

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, i.e. /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')
);

Upvotes: 4

Views: 2967

Answers (3)

firereaper
firereaper

Reputation: 51

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

Upvotes: 0

Javi Campa&#241;a
Javi Campa&#241;a

Reputation: 1481

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.

Upvotes: 9

Jason Xu
Jason Xu

Reputation: 885

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.

Upvotes: 1

Related Questions