accessing resources within nested react-routes using webpack file-loader

Question

I have recently switched my routing using react-router from hashHistory to browserHistory. There is a problem though. Everytime I access a nested route and try and refresh the page, public resources such as my logo can't be found as it uses the first part of the nested route as the root for the resource.

In my index.js I require the image as follows:

require('./images/logo-icon.png');

I am using a logo in my Navigation Bar component as follows:

      <Link to="/" className="gc-padding-none">
        <img alt="Get Cooked" className="gc-logo-default" src="images/logo-icon.png" />
      </Link>

and here are my routes:

 <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>

and here is my webpack config:

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]
};

Every time I go to '/' or '/chefs' everything loads fine, however, when I access a nested route such as '/chef/register' and refresh my browser the logo cannot be found in the Navigation Bar component.

The error below is presented:

logo-icon.png:1 GET http://localhost:8080/chef/images/logo-icon.png 404 (Not Found)

As you can see the logo is trying to be fetched from a location which includes the first part of my route '/chef'.

I have tried removing the publicPath configuration in my webpack, however, that affects the rendering of nested components on refresh.

Any ideas on why this is happening?

Try to change `images/logo-icon.png` to `/images/logo-icon.png` — elmeister, Dec 06 '17 at 17:44

score 4 · Accepted Answer · answered Dec 06 '17 at 18:09

To explain elmeister's comment,

images/logo-icon.png is a relative path making it dependent upon the current path.

So the request for images/logo-icon.png from url http://localhost:8080/chef/ results in a request for http://localhost:8080/chef/images/logo-icon.png.

/images/logo-icon.png is an absolute path ensuring the path is always based upon the root of the site, no matter what the current path might be.

So a request for /images/logo-icon.png from url http://localhost:8080/chef/ will result in a request for http://localhost:8080/images/logo-icon.png.

accessing resources within nested react-routes using webpack file-loader

1 Answers1