使用 webpack 在 React-Router 中使用嵌套路由的问题 [英] Issue using nested routes in React-Router with webpack
问题描述
我已经做了一些谷歌搜索，但在这个问题上无济于事.目前我对 React-Router 进行了以下设置
I have done some googling, but to no avail on this issue. Currently I have the following setup with 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 访问包含以下内容的 url 时，由于无法找到 http:localhost:8080/，我收到 404 错误作业/静态/bundle.js
Now when I go to a url with the following for http:localhost:8080/job/0001 I get a 404 error for not being able to locate http:localhost:8080/job/static/bundle.js
我觉得我只是遗漏了一些相当简单的东西.
I feel that I am just missing something fairly simple.
另一方面，这完全是客户端路由.
As a side not, this is entirely client side routing.
推荐答案
了解您的目录结构会很高兴.
It will be nice to know your directory structure.
从你的 webpack.config.js publicPath，你的 javascript 文件被捆绑到 http://localhost:8080/static/bundle.js
From your webpack.config.js publicPath, your javascript files are being bundled into http://localhost:8080/static/bundle.js
但是您已经在 index.html 文件中设置了相对路径 (./static/bundle.js).
But you have set a relative path (./static/bundle.js) in your index.html file.
这就是为什么当您访问 http://localhost:8080/jobs/0001 时，您的浏览器会尝试在 http://localhost:8080/jobs 中查找您的 bundle.js/static/bundle.js.
This is why when you visit http://localhost:8080/jobs/0001 your browser tries to look for your bundle.js in http://localhost:8080/jobs/static/bundle.js.
因此在 index.html 中设置脚本源以使用绝对路径，即
So set your script source in your index.html to use an absolute path, i.e.
<script src="/static/bundle.js"></script>
你应该没事.
这篇关于使用 webpack 在 React-Router 中使用嵌套路由的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
