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

admin管理员组

文章数量:1312836

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="/" ponent={App}>
      <IndexRoute ponent={App}></IndexRoute>
      <Route path="/user/:user" ponent={UserDashboard}></Route>
      <Route path="/signup" ponent={Signup} />
      <Route path="/signin" ponent={Signin} />
    </Route>
  </Router>
  ,
  document.getElementById('root')
);

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="/" ponent={App}>
      <IndexRoute ponent={App}></IndexRoute>
      <Route path="/user/:user" ponent={UserDashboard}></Route>
      <Route path="/signup" ponent={Signup} />
      <Route path="/signin" ponent={Signin} />
    </Route>
  </Router>
  ,
  document.getElementById('root')
);

• javascript
• reactjs
• redux
• react-router

Share Improve this question Follow edited Oct 27, 2016 at 0:37 user7024499 asked Oct 27, 2016 at 0:30 user7024499user7024499 96133 gold badges1010 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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.

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.

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" bees http://localhost:3000/css/bootstrap.min.css

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

本文标签： javascriptReact RouterCSS Styling BREAKS using paramsStatus 304 Not ModifiedStack Overflow