Question

我有一个小问题，关于SA的问题很少，但我无法弄清楚如何解决这个问题。我使用react-router-redux但是对于这个例子，我认为使用react-router

没有任何差异

我有一个简单的设置：

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

我正在使用：

的WebPack
的WebPack-DEV-服务器
HTML-的WebPack-插件

当我访问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/1234 chrome检查后点击刷新时，说来自服务器的200响应如下：

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

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

上的404

看起来所有的dev服务器工作正常，服务器确实返回了索引文件，但<script src="bundle.js"></script>正在bundle.js子内查找/item文件。

Answer 1

而不是：

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

执行：

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

因为当您直接访问/item/1234时，您目前拥有bundle.js的相对链接，因此浏览器会调用/item/bundle.js。

如果您使用的是html-webpack-plugin，则可以向开发服务器添加一些重写规则（您必须将其添加到生产服务器中） - see more here

React路由器热重装不起作用

1 个答案: