Question

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

无法获取/

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

live.bundle.js：14获取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()
  ]
};

Answer 1

除去

contentBase: "./src/www",

来自devServer配置的

。默认情况下，这将提供当前目录中的文件。我相信你正在寻找什么以及你的index.html生活在哪里？正确的吗？

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

1 个答案: