反应客户端渲染错误无法获取/答案

【问题标题】：react client side rendering error cannot get /反应客户端渲染错误无法获取/
【发布时间】：2016-03-31 05:22:51
【问题描述】：

我正在尝试学习反应，并且在尝试客户端路由时遇到了一些问题。如果您在列出的文件中看到我的错误，请告诉我。我在浏览器页面上不断收到的错误是

无法获取/

我在控制台中看到的错误是：

live.bundle.js:14 GET http://localhost:8080/ 404（未找到）

这是我的文件：

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: [
    'webpack/hot/only-dev-server',
    './js/app.js'
  ],
output: {
    path: __dirname + '/build',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ },
      // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
  devServer: {
    contentBase: "./src/www",
    noInfo: true,
    hot: true,
    inline: true
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

.babelrc

{
  "presets": ["es2015", "react"]
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
  </head>
  <body>
    <section id="react"></section>
    <script src="/build/bundle.js"></script>
  </body>
</html>

/js/app.js

import React from 'react';
import Router from 'react-router';
import {DefaultRoute, Link, Route, RouteHandler} from 'react-router';

import LoginHandler from './components/Login.js';

class App extends React.Component{
  render() {
    return(
      <div className="nav">

        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* Important Part */}
        <RouteHandler/>

      </div>
    );
  }
}

let routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

ReactDOM.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

/js/components/Login.js

import React from 'react';
class Login extends React.Component{
  render() {
    return(
      <div>Welcome to login</div>
    );
  }
}

export default Login;

感谢您的帮助。

这是我根据@Frederick Mfinanga 更新的 webpack.config.js 文件

var webpack = require('webpack');
module.exports = {
  entry: [
    'webpack/hot/only-dev-server',
    './js/app.js',
    'webpack-dev-server/client?localhost:8080'
  ],
  output: {
    path: __dirname + '/build',
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ },
      // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
  devServer: {
    // contentBase: "./src/www",
    noInfo: true,
    hot: true,
    inline: true
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

【问题讨论】：

您是否检查过您的应用是否创建了输出文件bundle.js？如果没有，那就是这个原因。它根本找不到那个特定的文件，因为你将它导入到 index.html 文件中，这就是你的代码中的问题。所以请确保 bundle.js 文件已创建。
嗨，Amir，我的应用正在一个名为 build 的文件夹中创建 bundle.js 文件。

标签： javascript reactjs webpack react-router

【解决方案1】：

删除

contentBase: "./src/www",

来自您的 devServer 配置。默认情况下，这将提供当前目录中的文件。我相信这就是您要查找的内容以及您的 index.html 所在的位置？对吗？

【讨论】：

你好 Frederick，我添加了这部分，因为如果我取出它，我会收到错误“未捕获的错误：[HMR] 热模块更换已禁用”。你还建议我这样做吗？如果是这样，我该如何解决我刚刚列出的错误？另外，我确实想提供我的 index.html 文件，并且是我的 index.html 所在的位置。
是的，仍然这样做并将这一行添加到您的条目数组中。 'webpack-dev-server/client?localhost:8080'，相应地更改端口并将其添加到插件数组中 new Webpack.HotModuleReplacementPlugin()
我听从了你的建议。我在浏览器中输入的网址是“localhost:8080/webpack-dev-server/#”；。我仍然收到错误“未捕获的错误：[HMR} 热模块替换已禁用”，我已更新我的问题以显示您对 webpack.config.js 文件的修改。如果我误解了您的指示，请告诉我。
在运行脚本时添加 --inline 标志。
所以不是“npm start”而是运行“npm start --inline”？如果是这样，我尝试过，但仍然出现错误“未捕获的错误：[HMR] 热模块更换已禁用。”