react客户端呈现错误无法获取/

react client side rendering error cannot get /

本文关键字：获取 错误 客户端 react      更新时间：2023-09-28

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

无法获取/

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

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;

我很感激你的帮助。

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

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()
  ]
};

删除

contentBase: "./src/www",

从您的devServer配置。默认情况下，这将为当前目录中的文件提供服务。我相信这就是你要找的，你的index.html住在哪里？对的

相关文章：