javascript - webpack-dev-server 不使用 react-router 参数路由从配置位置提供包

Question

使用 react-router 我的路由匹配并且我的应用程序包 SearchUXBundle.js 正确地从一级路由加载 - 但二级路由/tracker/:id 错误地尝试从 localhost/tracker/dist/SearchUXBundle 加载我的应用程序包。 js 而不是 localhost/dist/SearchUXBundle.js。我假设这是 webpack“输出”中与我缺少的相对路径相关的某种配置皱纹......

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

应用程序.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

您需要确保您的 index.html 文件中的链接包是绝对的。如果它是相对的，那么该位置将根据 URL 而变化，并且任何嵌套路由都将指向一个不存在的位置。

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

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