反应路由器热重载不工作

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-server
html-webpack-plugin

当我访问 localhost:8080 时，会呈现 IndexRoute。然后我可以按设置了 onClick={() => this.props.dispatch(routeActions.push('/item/' + item.uuid))} 的项目之一。这个阶段的历史很好，我可以回去 select 另一个项目等等。但是...

例如，当我在项目页面上 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

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

Answer 1

而不是：

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

做：

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

因为当您直接访问 /item/1234 时，当前您有一个相对于 bundle.js 的 link 所以浏览器将调用 /item/bundle.js.

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

Answer 2

我的问题通过在 webpack.config devServer 部分添加 historyApiFallback: true 并在头部 <base href="/"> 中添加

来解决

<!DOCTYPE html>
 <html>
  <head>
   <base href="/">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link
     rel="stylesheet"
     type="text/css"
     href="fonts/font-awesome/css/font-awesome.css"
    />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" >
   <div id="root"></div>
   <script type="text/javascript" src="js/jquery.1.11.1.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
  </body>

 </html>

在这个项目中，我使用了外部资源，例如bootstrap和在head标签中添加的一些样式，以及index.html文件中的javascript文件，但是而不是这种方式，最好将它们添加到 package.json 中并导入到组件中。

反应路由器热重载不工作

React router hot-reload not working

reactjs

react-router