React应用重置密码URL访问异常，main.js、favicon加载失败如何修复？

你遇到的报错核心有两个关联问题：

1. %PUBLIC_URL% 是前端构建工具（webpack、create-react-app、vue-cli等）预留的公共路径占位符，当前该占位符没有被正确替换成实际的资源路径，直接被带入了资源请求地址。
2. 你的静态资源（main.js、favicon.ico等）配置了相对路径加载，访问 /reset/xxx/xxx 这类二级以上嵌套路由时，浏览器会自动把当前路由路径作为前缀拼接资源地址，最终生成了 /reset/xxx/%PUBLIC_URL%/favicon.ico 这类非法的请求路径，导致资源加载失败。

• 修正构建工具的公共路径配置
  不要使用相对路径 ./ 作为公共路径，统一改为绝对路径根目录 /：
  如果是webpack项目，修改webpack配置：

  module.exports = {
    // 其他配置省略
    publicPath: '/'
  }
  

  如果是vite项目，修改vite.config.js：

  export default {
    // 其他配置省略
    base: '/'
  }
  

  若项目部署在域名子目录下，将公共路径改为对应的子目录路径，比如 '/my-project/'，前后斜杠保留。
• 修正HTML模板的资源引用
  检查html模板中favicon、全局静态资源的引用写法，要么直接用绝对路径 /favicon.ico，要么确认 %PUBLIC_URL% 占位符会被构建工具正确替换，不要将含占位符的未编译代码直接部署到服务端。
• 开发环境额外配置
  如果是本地开发时出现该问题，确认前端路由开启history模式的同时，devServer开启了history fallback配置，确保所有路由请求都回退到index.html：

  // webpack devServer 配置示例
  devServer: {
    historyApiFallback: true
  }
  

内容的提问来源于stack exchange，提问作者greg