React Router 路由404，设置过historyApiFallback无效

Question

问题描述

背景：vue栈转的React，目前正在学习React中。
问题：用的BrowserRouter，手动刷新页面会出现cannot get /xxx 的问题

问题出现的环境背景及自己尝试过哪些方法

1. webpack设置过devServer的historyApiFallback: true，rewrites也设置过，但无效
2. package.json设置过"serve": "webpack serve --config build/webpack.dev.js --history-api-fallback"，无效
3. 设置过devServer的publicPath好像无关。。。

相关代码

// webpack.dev.js
devServer: {
    port: 8090,
    hot: true,
    contentBase: '../dist',
    historyApiFallback: {
      rewrites: [
        {
          from: /.*/,
          to: '/public/index.html'
        }
      ]
    },
    publicPath: '/',
    proxy: {
      '/': {
        target: 'http://localhost:3000',
        secure: false,
        changeOrigin: true
      }
    }
  },

// webpack.config.js
entry: ['@babel/polyfill', path.resolve(__dirname, '../src/main.js')], // 入口文件
output: {
    filename: '[name].[contenthash:8].js', // 打包后的文件名称
    path: path.resolve(__dirname, '../dist'), // 打包后输出的文件所在的目录
    chunkFilename: 'js/[name]:[contenthash:8].js',
  },

// package.json
"scripts": {
    "serve": "webpack serve --config build/webpack.dev.js --history-api-fallback",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.prod.js",
    "dll": "webpack --config build/webpack.vendor.config.js"
  },

// 项目目录结构

// 实际上配置了historyApiFallback之后，执行npm run serve的确能看到这个了：

你期待的结果是什么？实际看到的错误信息又是什么？

期待手动刷新，不会出现404。

ps: 总觉得是我的参数的路径有问题？

Answer 1

兄弟们，我来结束这个问题了，先说一句，我好菜啊/(ㄒoㄒ)/~~求大佬们轻喷/(ㄒoㄒ)/~

先说结论，上面那样设置historyApiFallback: true是没有问题的。

而我设置了之后无效的原因是：我开发的时候，本地是同时起了一个端口为3000的后端服务的，然后大家可以看到我的跨域代理设置了把请求代理到我本地的3000端口的后端服务地址:

proxy: {
  '/': {
    target: 'http://localhost:3000',
    secure: false,
    changeOrigin: true
  }
}

所以这时候，浏览器发出的请求（不管是路由还是接口请求）都会被转发到我本地的3000端口去。。。以致于我手动刷新的时候浏览器请求的不是前端路由而是接口地址orz

所以解决方法就是，稍微改一下，只有接口请求才会被转发：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    secure: false,
    changeOrigin: true,
    pathRewrite: {'^/api': ''}
  }
}

Answer 2

contentBase换成'../public'试试？

Answer 3

publicPath 不是设置在 devServer里面的, 应该在devServer里面设置historyApiFallback: true才是正确的,然后设置webpack output 添加publickPath: /