反应路由器热重载不起作用

Question

反应路由器热重载不起作用

我有一个小问题，关于 SA 的类似问题已经很少了，但我不知道如何解决这个问题。我正在使用，react-router-redux但对于这个例子，我认为使用没有任何区别react-router

我有一个简单的设置：

<Router history={browserHistory}>
  <Route path="/">
    <IndexRoute component={ItemList}/> 
    <Route path='item/:uuid' component={Item}/> 
  <Route>
<Router>

Run Code Online (Sandbox Code Playgroud)

我在用：

网络包
webpack-dev-server
html-webpack-plugin

当我访问 localhost:8080 时，会呈现 IndexRoute。然后我可以按下已onClick={() => this.props.dispatch(routeActions.push('/item/' + item.uuid))}设置的项目之一。这个阶段的历史运行良好，我可以返回并选择另一个项目等等。但...

当我在一个项目页面上时，例如 localhost:8080/item/1234 并且当我点击刷新时，我得到：

404 not found - localhost:8080/item/bundle.js

当我对项目页面进行一些更改并且热重载正在重新渲染它时，也会发生这种情况。

经过几个问题后，我可以确认我有historyApiFallback: true，当我启动服务器时，它报告说404s will fallback to /index.html

更新：

因此，当我在localhost:8080/item/1234chrome 检查后点击刷新时说，来自服务器的 200 响应如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Damage Increased</title>
  </head>
  <body> 
    <script src="bundle.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

然后是 404 http://localhost:8080/item/bundle.js

看起来所有开发服务器的东西都工作正常，服务器确实返回了索引文件，但随后<script src="bundle.js"></script>正在寻找子bundle.js文件中的文件/item。

Answer 1

top*_*man 6

代替：

<script src="bundle.js"></script>

Run Code Online (Sandbox Code Playgroud)

做：

<script src="/bundle.js"></script>

Run Code Online (Sandbox Code Playgroud)

因为当你直接访问时/item/1234，目前你有一个相对链接，bundle.js所以浏览器会调用/item/bundle.js.

如果您正在使用html-webpack-plugin，您可以将一些重写规则添加到您的开发服务器（您必须将其添加到您的生产服务器中） -在这里查看更多

归档时间：	9 年，10 月前
查看次数：	1434 次
最近记录：	9 年，10 月前