javascript - 在使用 react js 开发的生产环境中重新加载网站时出错

Question

目前我已经开发了一个站点，react js并且我已经使用react-router-dom了这些路由，当我运行命令 npm run build 以使项目准备好投入生产时，当我尝试使用 xampp 让站点在子目录中运行时发现一些不一致的地方，不一致如下面所述

1. 当我在浏览器中放置与浏览器的根路径不同的路径时，例如localhost:8085/pruebaDev/viewusers/它返回以下内容：

找不到对象！请求的 URL 无法在此服务器上找到。如果您手动输入了 URL，请检查您的拼写并重试。

2. 当我只放置子目录的初始路径时，它会毫无问题地加载，例如localhost:8085/pruebaDev/

我所做的配置如下

.htaccess 配置

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /pruebaDev/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

package.json 文件

  "homepage": ".",
  "name": "pruebaDev",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "moment": "^2.29.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "sweetalert2": "^10.9.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts 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"
    ]
  }
}

路由 App.js 的配置文件

<Router basename={'/pruebaDev/'}>
  ...
</Router>

标签： javascriptreactjs.htaccessreact-router