Question

使用react-router我的路由匹配，我的应用程序包SearchUXBundle.js从第一级路由正确加载 - 但第二级路由/跟踪器/：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)
      }
  }
};

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

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

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

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

webpack-dev-server不使用react-router param route从配置位置提供bundle

1 个答案: