求助：React网站直接输入URL路径出现Cannot GET /path错误的解决方法

问题根源 #

你用的BrowserRouter是基于HTML5 History API的客户端路由：在应用内点击链接时，路由切换由React在浏览器端完成，不会向服务器发起新请求；但直接在地址栏输入URL或刷新页面时，浏览器会向服务器请求对应路径的静态资源，而服务器上并没有/services这个文件，因此返回Cannot GET /services的错误。

解决方案 #

根据你的部署环境，选择对应配置方式：

1. 基于Create React App构建的项目 #

• 在项目根目录的package.json中添加homepage字段：

  "homepage": ".",
  

• 重新构建项目：

  npm run build
  

• 如果使用serve这类静态文件服务器部署，需加上-s参数开启路由 fallback：

  npm install -g serve
  serve -s build
  

2. Nginx服务器配置 #

修改Nginx站点配置文件，添加try_files指令将所有请求指向index.html：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/build/folder;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改完成后重启Nginx：

sudo nginx -s reload

3. Apache服务器配置 #

在项目构建目录下创建.htaccess文件，写入以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

确保Apache已启用mod_rewrite模块。

4. Express服务器配置 #

安装connect-history-api-fallback中间件处理路由 fallback：

npm install connect-history-api-fallback --save

在Express服务代码中添加中间件：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 优先处理路由 fallback
app.use(history());
// 提供静态文件服务
app.use(express.static(__dirname + '/build'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

补充说明 #

你的App.js中BrowserRouter和路由配置本身没有问题，核心问题是服务器未配置路由 fallback，只要按上述方式调整服务器或构建配置，就能解决直接输入URL访问的问题。

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