如何使browserHistory与webpack协同工作

Question

 const webpack = require('webpack'),
path = require('path');
module.exports = {
  context: __dirname,
  entry: {
    // 'landingPages': path.resolve(__dirname, 'app/landingPages'),
    'merchant': path.resolve(__dirname, 'app/merchant')
},
output: {
  filename: 'build/[name].js',
  chunkFilename: 'build/chunks/[hash]_[name].js',
},
watch: true,
  // cache: true,
  // debug: true,
  // devtool: true,
  module: {
    rules: [
    {
      test: /app.*\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [
      {
        loader: 'babel-loader',
        options:{
          presets: ['es2015', 'react', 'stage-2'],
          plugins: ['react-html-attrs'],
        }
      },
      // 'eslint-loader'
      ]
    }]
  },
  resolve: {
    // resolver: path.resolve('./'),
    modules: [
    path.join(__dirname, "app"),
    'node_modules'
    ],
    extensions: ['.js', '.jsx'],
    alias: {
      sharedAssets: 'app/sharedAssets',
      gaService: 'app/Google/gaService.js',
      css: 'media/css'
    }
  }
};

我正在重定向用户以使用app / merchant中的index.js文件。

当我重定向到它显示给我的网址时

警告：[react-router]位置＆＃34; / react / app / merchant /＆＃34;与任何路线都不匹配

文件夹结构：

请帮忙

Answer 1

在您的网站包中添加以下内容

devServer: {
    historyApiFallback: true
}

它基本上做的是默认返回index.html，然后所有路由都以此为基础完成。您的webpack配置看起来像

const webpack = require('webpack'),
path = require('path');
module.exports = {
  context: __dirname,
  entry: {
    // 'landingPages': path.resolve(__dirname, 'app/landingPages'),
    'merchant': path.resolve(__dirname, 'app/merchant')
},
output: {
  filename: 'build/[name].js',
  chunkFilename: 'build/chunks/[hash]_[name].js',
},
devServer: {
    historyApiFallback: true
},
watch: true,
  // cache: true,
  // debug: true,
  // devtool: true,
  module: {
    rules: [
    {
      test: /app.*\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [
      {
        loader: 'babel-loader',
        options:{
          presets: ['es2015', 'react', 'stage-2'],
          plugins: ['react-html-attrs'],
        }
      },
      // 'eslint-loader'
      ]
    }]
  },
  resolve: {
    // resolver: path.resolve('./'),
    modules: [
    path.join(__dirname, "app"),
    'node_modules'
    ],
    extensions: ['.js', '.jsx'],
    alias: {
      sharedAssets: 'app/sharedAssets',
      gaService: 'app/Google/gaService.js',
      css: 'media/css'
    }
  }
};