react 路由刷新报错问题

情况1：双层路由 /a/b刷新报错， react router 的bug ，浏览器解析会导致资源地址错误

查阅的各种帖子，什么 ngnix 配置；都不好使。解决办法 换成单级路由  /a_b

情况2： ngnix配置过滤时和 路由名字重复，这个改名字

附带一个：react 使用 react-app-rewired 启动项目配置：package.json 和  config-overrides.js

// package.json

{
  "name": "version_ui",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "antd": "^3.26.12",
    "history": "^4.10.1",
    "isomorphic-fetch": "^2.2.1",
    "moment": "^2.24.0",
    "notificationcenter": "^1.1.0",
    "number-precision": "^1.3.2",
    "polished": "^3.4.4",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-loadable": "^5.5.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "store2": "^2.10.0",
    "wangeditor": "^3.1.1",
    "webpack-build-notifier": "^2.0.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "babel-plugin-import": "^1.13.0",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^3.4.2",
    "customize-cra": "^0.9.1",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "react-app-rewired": "^2.1.5"
  }
}

// config-overrides.js

const {
  override,
  addLessLoader,
  fixBabelImports,
  addBabelPlugin,
  addBabelPlugins,
  useBabelRc,
  useEslintRc,
  addWebpackAlias,
  addDecoratorsLegacy,
  overrideDevServer,
  addWebpackPlugin
} = require("customize-cra");
// const rewireReactHotLoader = require("react-app-rewire-hot-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 打包完成桌面提醒
// const WebpackBuildNotifierPlugin = require("webpack-build-notifier");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");

// const ProgressBarPlugin = require('progress-bar-webpack-plugin')

// const Dashboard = require('webpack-dashboard')
// const DashboardPlugin = require('webpack-dashboard/plugin')
// const dashboard = new Dashboard()

const path = require("path");
// const fs = require("fs");
//读取envURL.json文件
// const envURL = fs.readFileSync(path.join(__dirname, 'public/envURL.json'), "utf-8");
// 跨域配置
const devServerConfig = () => config => {
  return {
    ...config,
    port: 9000,
    historyApiFallback: true,
    // 服务开启gzip
    // compress: true,
    // proxy: {
    //   "/api": {
    //     target: "http://192.168.4.195:2021/version",
    //     changeOrigin: true,
    //     pathRewrite: {
    //       "^/api": "/api",
    //     },
    //   }
    // }
  }
}
// const proxyApi = {
//   '/api': {
//     target: JSON.parse(envURL).version, // prod 
//     changeOrigin: true,
//     secure: false,
//     xfwd: false,
//     pathRewrite: {
//       "^/api": "/"
//     }
//   },
//   "/store": {
//     // target: '', // staging
//     changeOrigin: true,
//     secure: false,
//     xfwd: false,
//     pathRewrite: {
//       "^/store": "/"
//     }
//   }
// }
// 关闭sourceMap
const rewiredMap = () => config => {
  config.devtool = config.mode === "development" ? "cheap-module-source-map" : false

  return config
}
// 热跟新
// const hotLoader = () => (config, env) => {
//   config = rewireReactHotLoader(config, env)
//   return config
// }
//生产环境去除console.* functions
const dropConsole = () => {
  return config => {
    if (config.optimization.minimizer) {
      config.optimization.minimizer.forEach(minimizer => {
        if (minimizer.constructor.name === "TerserPlugin") {
          minimizer.options.terserOptions.compress.drop_console = true
        }
      })
    }
    return config
  }
}
// const delConflictingOrder = () => {
//   return config => {
//     for (let i = 0; i < config.plugins.length; i++) {
//       const p = config.plugins[i]
//       if (!!p.constructor && p.constructor.name === MiniCssExtractPlugin.name) {
//         const miniCssExtractOptions = { ...p.options, ignoreOrder: true }
//         config.plugins[i] = new MiniCssExtractPlugin(miniCssExtractOptions)
//         break
//       }
//     }
//   }
// }
// const addMiniCssExtractPlugin = () => {
//   return config => {
//     config.plugins.unshift(
//       new FilterWarningsPlugin({
//         // exclude: /any-warnings-matching-this-will-be-hidden/
//         // exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
//         exclude: /\[mini-css-extract-plugin\][^]*Conflicting order between:/
//       })
//     )
//   }
// };
const srcOuterScope = () => {
  return config => {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
    return config;
  }
}
const addPolyfill = () => {
  return config => {
    config.entry.unshift("babel-polyfill");
    return config;
  }
}
module.exports = {
  webpack: override(
    fixBabelImports("import", {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true
    }),
    addLessLoader({
      // strictMath: true,
      // noIeCompat: true,
      javascriptEnabled: true,
      modifyVars: { "@primary-color": "#cc0000" }
    }),
    // 配置babel解析器
    addBabelPlugin(["@babel/plugin-proposal-decorators", { legacy: true }]),
    // ...addBabelPlugins(
    //  ["@babel/plugin-proposal-decorators", {"legacy": true}]
    // ),
    // useBabelRc(),
    addWebpackAlias({
      ["@"]: path.resolve(__dirname, "src"),
      ["@public"]: path.resolve(__dirname, "public"),
      ["@pages"]: path.resolve(__dirname, "src/pages"),
      ["@component"]: path.resolve(__dirname, "src/component"),
      ["@utils"]: path.resolve(__dirname, "src/utils")
    }),
    // 启用装饰器语法
    // addDecoratorsLegacy(),
    useEslintRc(".eslintrc"),
    // 关闭mapSource
    rewiredMap(),
    // 热跟新
    // hotLoader(),
    dropConsole(),
    // src以外引入文件
    srcOuterScope(),
    // 对es6、7语法进行低版本浏览器再次降级；
    addPolyfill(),
    // 打包编译完成提醒
    // addWebpackPlugin(
    //   new WebpackBuildNotifierPlugin({
    //     title: "唐泉版本管理系统",
    //     logo: path.resolve(""),
    //     suppressSuccess: true
    //   }),
    //   new MiniCssExtractPlugin({
    //     filename: "static/css/[name].[contenthash].css",
    //     chunkFilename: "static/css/[id].[contenthash].css",
    //     ignoreOrder: false
    //     // moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`
    //   }),
    //   // 美化控制台
    //   // new DashboardPlugin(dashboard.setData),
    //   // 进度条
    //   // new ProgressBarPlugin(),
    //   delConflictingOrder(),
    //   addMiniCssExtractPlugin(),
    // ),
  ),
  devServer: overrideDevServer(
    devServerConfig()
  )
  // devServer: configFunction => (proxy, allowedHost) => {
  //   proxy = process.env.NODE_ENV === "development" ? proxyApi : proxyApi
  //   // allowedHost： 添加额外的地址
  //   const config = configFunction(proxy, allowedHost)
  //   return config
  // }
};