反应路由器 - 使用参数的 CSS 样式中断？ - 状态 304 未修改？答案

【问题标题】：React Router - CSS Styling BREAKS using params? - Status 304 Not Modified?反应路由器 - 使用参数的 CSS 样式中断？ - 状态 304 未修改？
【发布时间】：2016-10-27 00:30:12
【问题描述】：

请帮忙。我一切正常，注册页面正常，登录页面也正常。但是，例如，当我转到 url 路由 /user/3 时，它会破坏我放置在我的 react/redux 应用程序的公共目录中的自定义 CSS 样式页面。我的样式表根本不再被阅读。只有引导样式。

当我查看 chrome 开发工具中的网络选项卡时，在我的其他路由上，样式表以状态 200 发送，但是当我尝试使用斜杠访问路由时，即 /user/4，样式表以 304 发送未修改...

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')
);

【问题讨论】：

标签： javascript reactjs redux react-router

【解决方案1】：

我有同样的问题，我通过更改我的 css 文件的链接来解决它。

原来是：

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

解决办法是：（去掉第一个点，一切正常）

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

也许你的问题是其他的......但我和你有同样的问题。

【讨论】：

【解决方案2】：

304 是因为浏览器缓存。可以通过浏览器的设置清除缓存或者使用Ctrl+F5（windows）/ Command + R(MacOS) 强制刷新。然后再试一次。

【讨论】：

【解决方案3】：

最好以 / 开头 URL，这样它会返回您想要的 URL，而不是其父或子。

如果您正在浏览的 URL 是 http://localhost:3000/user/johnny，那么根据您的 href 中是否有正斜杠，您最终会得到以下链接。

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

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

【讨论】：