Sca*_*olo 3 javascript url-routing webpack react-router
我做了一些谷歌搜索,但在这个问题上无济于事.目前我使用React-Router进行了以下设置
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
export default (
<Route path="/" handler={App}>
<Route path="" handler={Home} />
<Route path="create-job" handler={CreateJob} />
<Route path="jobs" handler={JobStatuses} />
<Route path="job/:jobId" handler={Job} />
</Route>
);
我也有以下webpack.config.js文件.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
path.resolve(__dirname, 'app', 'main.js')
],
output: {
path: path.join(__dirname, 'static'),
publicPath: "static/",
filename: 'bundle.js'
},
module: {
loaders: [
{ test: path.join(__dirname, 'app'), loaders: ["react-hot", "babel?stage=0"] },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
plugins: [
// Avoid publishing files when compilation failed
new webpack.NoErrorsPlugin()
],
stats: {
// Nice colored output
colors: true
},
devServer: {
historyApiFallback: true,
proxy: { "\/api\/*": "http://localhost:8888" }
},
// Create Sourcemaps for the bundle
devtool: 'source-map'
};
的index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Hippo</title>
</head>
<body>
<div id="app"></div>
<script src="./static/bundle.js"></script>
</body>
</html>
现在,当我使用以下内容访问网址时,http:localhost:8080/job/0001因为无法找到而导致404错误http:localhost:8080/job/static/bundle.js
我觉得我只是错过了一些相当简单的东西.
作为一方而言,这完全是客户端路由.
小智 11
知道你的目录结构会很高兴.
从您的webpack.config.jspublicPath,您的javascript文件被捆绑到http://localhost:8080/static/bundle.js
但是您已./static/bundle.js在index.html文件中设置了相对路径().
这就是为什么当您访问http://localhost:8080/jobs/0001浏览器时尝试查找您的bundle.js http://localhost:8080/jobs/static/bundle.js.
因此,在index.html中设置脚本源以使用绝对路径,即
<script src="/static/bundle.js"></script>
你应该没事.
这是因为你publicPath是亲戚。将您的公共路径更改为绝对路径，如下所示：
output: {
path: path.join(__dirname, 'static'),
publicPath: "/static/",
filename: 'bundle.js'
},
| 归档时间： |
|
| 查看次数： |
1469 次 |
| 最近记录： |