React项目部署到Strato后非根路由404问题求助

问题现象 #

将React.js项目部署到Strato服务器后，根页面/访问正常，但访问/status、/login等非根路由时，服务器返回「Not Found The requested URL was not found on this server」错误，本地开发环境运行无此问题。

问题原因 #

React应用使用客户端路由，所有路由逻辑由浏览器端的React Router处理。当直接在浏览器地址栏输入非根路由或刷新页面时，服务器会尝试寻找对应路径的物理文件，但这些路由对应的文件在服务器上并不存在，因此返回404错误。本地开发时，Webpack Dev Server会自动将所有路由请求转发到index.html，所以不会出现该问题。

解决方案 #

针对Strato服务器（基于Apache），需要通过.htaccess配置URL重写，将所有非静态资源的请求转发到index.html，由React Router处理路由逻辑。

1. 正确配置.htaccess #

在网站根目录创建或修改.htaccess文件，添加以下规则（比你提供的规则更严谨，会排除实际存在的静态文件和目录，避免影响图片、CSS、JS等资源的加载）：

RewriteEngine On
RewriteBase /
# 跳过实际存在的文件、目录、符号链接
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
# 将所有其他请求转发到index.html
RewriteRule ^ index.html [L]

2. 优化路由代码（可选） #

检查你的路由代码，src/Routes.js中重复导入了BrowserRouter as Router，但外层index.js已经用<Router>包裹了整个应用，嵌套路由上下文可能引发潜在问题，建议删除这行导入：
修改后的src/Routes.js开头部分：

import React from "react";
import { Route, Routes } from "react-router-dom";
// 其余导入和路由逻辑保持不变

3. 部署验证 #

• 确保你已经执行npm run build生成了生产环境的构建文件
• 将build目录下的所有文件完整上传到Strato服务器的网站根目录
• 上传修改后的.htaccess文件到根目录
• 重新访问非根路由，验证是否正常加载

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