webpack-dev-server不使用React-Router参数路由从配置位置提供包

Question

Using react-router my routes match and my app bundle SearchUXBundle.js correctly loads from first level routes - but second level routes /tracker/:id incorrectly are trying to load my app bundle from localhost/tracker/dist/SearchUXBundle.js instead of localhost/dist/SearchUXBundle.js. im assuming this is some kind of config wrinkle in webpack 'output' relating to relative paths that im missing...

webpack.config,js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  devServer: {
        inline:false,
        port: 8001,
        historyApiFallback: true 
  },
  entry: {
    app: ['./src/root.js']
  },

  output: {
          path: "/dist",
          publicPath: '/',
          filename: '/dist/SearchUXBundle.js'
    },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          retainLines: true,
          cacheDirectory: true
        }
      },
      {
        test: /.css$/,
        loaders: ['style', 'css']     
      },
      { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },
    ]
  },
  resolve: {
      alias: {
          __CONFIG__: path.join(__dirname, 'config', process.env.REACT_ENV)
      }
  }
};

app.js

...
const store = createStore(rootReducer, enhancer);
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState()
});

render(
  <Provider store={store} >
     <Router history={history}> 
        <Route path="/" component={SearchUXContainer} />
        <Route path="tracker/:id" component={EmailTrackerContainer}/>
        <Route path="thisWorks" component={SearchUXContainer}/>
     </Router>
  </Provider>,
  document.getElementById('app')
);

Answer 1

You need to make sure that the linked bundle in your index.html file is absolute. If it is relative, then the location will vary based on the URL and any nested routes will point to a non-existent location.

<!-- bad -->
<script src="dist/SearchUXBundle.js"></script>

<!-- good -->
<script src="/dist/SearchUXBundle.js"></script>