Ich versuche zu lernen, reagieren und ich komme zu einigen Problemen beim Client-Side-Routing versuchen. Bitte lassen Sie mich wissen, wenn Sie den Fehler, den ich in meinen Dateien, die ich listed.The Fehler haben sehen halten auf der Browser-Seite bekommenReagieren Client Seite Rendering Fehler kann nicht erhalten/
ist nicht bekommen kann/
Der Fehler, den ich in meiner Konsole sehen ist:
live.bundle.js: 14 GET http://localhost:8080/ 404 (nicht gefunden)
Hier sind meine Dateien:
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;
Ich schätze die Hilfe.
Hier ist meine webpack.config.js Datei aktualisiert nach @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()
]
};
Haben Sie überprüft, ob Ihre App die Ausgabedatei 'bundle.js' erstellt? Wenn nicht, dann ist das der Grund. Es kann einfach nicht diese spezifische Datei finden und weil Sie es in 'index.html' Datei importieren, ist das Problem in Ihrem Code. Stellen Sie daher sicher, dass die Datei 'bundle.js' erstellt wurde. –
Hallo Amir, meine App erstellt die Datei bundle.js in einem Ordner namens build. –