使用 webpack 文件加载器访问嵌套反应路由中的资源
accessing resources within nested react-routes using webpack file-loader
我最近使用 react-router 将我的路由从 hashHistory 切换到 browserHistory。但是有一个问题。每次我访问嵌套路由并尝试刷新页面时,都找不到 public 资源(例如我的徽标),因为它使用嵌套路由的第一部分作为资源的根。
在我的index.js中,我需要如下图片:
require('./images/logo-icon.png');
我在导航栏组件中使用如下徽标:
<Link to="/" className="gc-padding-none">
<img alt="Get Cooked" className="gc-logo-default" src="images/logo-icon.png" />
</Link>
这是我的路线:
<Route path="/" component={NavigationBar}>
<IndexRoute component={Home} />
<Route path="/chefs" component={ProfileList} />
<Route exact path="register" component={Register} redirect />
<Route path="chef">
<Route path="register" component={RegisterChef} />
</Route>
</Route>
这是我的 webpack 配置:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/client/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./client/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
inline: true,
contentBase: './client',
port: 8080,
proxy: { '/api/**': { target: 'http://localhost:3000', secure: false } }
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','react'], plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']}},
{test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, loader: 'file-loader?name=/images/[name].[ext]'},
{test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader','resolve-url-loader']},
{test: /\.scss$/, loaders: ['style-loader', 'css-loader','postcss-loader', 'sass-loader','resolve-url-loader']}
]
},
plugins: [HTMLWebpackPluginConfig]
};
每次我转到“/”或“/chefs”时,一切都加载正常,但是,当我访问诸如“/chef/register”之类的嵌套路由并刷新浏览器时,无法在导航栏组件。
出现以下错误:
logo-icon.png:1 GET http://localhost:8080/chef/images/logo-icon.png 404 (Not Found)
如您所见,徽标正试图从包含我的路线“/chef”的第一部分的位置获取。
我尝试删除我的 webpack 中的 publicPath 配置,但是,这会影响刷新时嵌套组件的呈现。
关于为什么会发生这种情况有什么想法吗?
为了解释 elmeister 的评论,
images/logo-icon.png
是相对路径,使其依赖于当前路径。
因此 url http://localhost:8080/chef/
对 images/logo-icon.png
的请求导致对 http://localhost:8080/chef/images/logo-icon.png
.
的请求
/images/logo-icon.png
是绝对路径,确保路径始终基于站点的根目录,无论当前路径是什么。
因此 url http://localhost:8080/chef/
对 /images/logo-icon.png
的请求将导致 http://localhost:8080/images/logo-icon.png
.
的请求
我最近使用 react-router 将我的路由从 hashHistory 切换到 browserHistory。但是有一个问题。每次我访问嵌套路由并尝试刷新页面时,都找不到 public 资源(例如我的徽标),因为它使用嵌套路由的第一部分作为资源的根。
在我的index.js中,我需要如下图片:
require('./images/logo-icon.png');
我在导航栏组件中使用如下徽标:
<Link to="/" className="gc-padding-none">
<img alt="Get Cooked" className="gc-logo-default" src="images/logo-icon.png" />
</Link>
这是我的路线:
<Route path="/" component={NavigationBar}>
<IndexRoute component={Home} />
<Route path="/chefs" component={ProfileList} />
<Route exact path="register" component={Register} redirect />
<Route path="chef">
<Route path="register" component={RegisterChef} />
</Route>
</Route>
这是我的 webpack 配置:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/client/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./client/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
inline: true,
contentBase: './client',
port: 8080,
proxy: { '/api/**': { target: 'http://localhost:3000', secure: false } }
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: ['es2015','react'], plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']}},
{test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, loader: 'file-loader?name=/images/[name].[ext]'},
{test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader','resolve-url-loader']},
{test: /\.scss$/, loaders: ['style-loader', 'css-loader','postcss-loader', 'sass-loader','resolve-url-loader']}
]
},
plugins: [HTMLWebpackPluginConfig]
};
每次我转到“/”或“/chefs”时,一切都加载正常,但是,当我访问诸如“/chef/register”之类的嵌套路由并刷新浏览器时,无法在导航栏组件。
出现以下错误:
logo-icon.png:1 GET http://localhost:8080/chef/images/logo-icon.png 404 (Not Found)
如您所见,徽标正试图从包含我的路线“/chef”的第一部分的位置获取。
我尝试删除我的 webpack 中的 publicPath 配置,但是,这会影响刷新时嵌套组件的呈现。
关于为什么会发生这种情况有什么想法吗?
为了解释 elmeister 的评论,
images/logo-icon.png
是相对路径,使其依赖于当前路径。
因此 url http://localhost:8080/chef/
对 images/logo-icon.png
的请求导致对 http://localhost:8080/chef/images/logo-icon.png
.
/images/logo-icon.png
是绝对路径,确保路径始终基于站点的根目录,无论当前路径是什么。
因此 url http://localhost:8080/chef/
对 /images/logo-icon.png
的请求将导致 http://localhost:8080/images/logo-icon.png
.