在带有 webpack 的 React-Router 中使用嵌套路由的问题
Posted
技术标签:
【中文标题】在带有 webpack 的 React-Router 中使用嵌套路由的问题【英文标题】：Issue using nested routes in React-Router with webpack 【发布时间】：2016-01-07 14:52:53 【问题描述】：我已经做了一些谷歌搜索，但在这个问题上无济于事。目前我使用 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 的以下网址时，由于无法找到 http:localhost:8080/job/static/bundle.js 而出现 404 错误
我觉得我只是缺少一些相当简单的东西。
另一方面，这完全是客户端路由。
【问题讨论】：
【参考方案1】：很高兴知道你的目录结构。
从您的 webpack.config.jspublicPath，您的 javascript 文件被捆绑到 http://localhost:8080/static/bundle.js
但是您在 index.html 文件中设置了相对路径 (./static/bundle.js)。
这就是为什么当您访问 http://localhost:8080/jobs/0001 时，您的浏览器会尝试在 http://localhost:8080/jobs/static/bundle.js 中查找您的 bundle.js。
所以在 index.html 中设置脚本源以使用绝对路径，即
<script src="/static/bundle.js"></script>
你应该没事的。
【讨论】：
【参考方案2】：这是因为您的publicPath 是相对。将您的公共路径更改为绝对路径，如下所示：
output:
path: path.join(__dirname, 'static'),
publicPath: "/static/",
filename: 'bundle.js'
,
【讨论】：
以上是关于在带有 webpack 的 React-Router 中使用嵌套路由的问题的主要内容，如果未能解决你的问题，请参考以下文章