React嵌套路由服务端直接访问子路径返回404问题求助

该问题是单页应用客户端路由与服务端路由逻辑不匹配导致：

• React Router 采用 BrowserHistory 模式时，路由跳转逻辑完全由客户端JS控制
• 客户端通过 history.push 跳转仅修改浏览器地址栏，未发起真实服务端请求，可正常加载对应组件
• 直接输入URL或刷新页面时，浏览器会向服务端请求对应路径的静态资源，服务端不存在 /AppName/Wizard 对应的实体文件，因此返回404。

方案1：配置服务端路由 fallback（优先推荐） #

将所有匹配 /AppName/* 规则的请求，统一返回SPA的入口 index.html 文件即可，不同服务端配置示例如下：

Nginx 配置 #

在nginx站点配置的server块中添加规则：

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

Apache 配置 #

在站点根目录下的 .htaccess 文件中添加规则：

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

Node.js Express 配置 #

在静态资源托管逻辑后添加 fallback 规则：

app.use('/AppName', express.static(path.join(__dirname, 'build')));
// 匹配所有/AppName前缀的请求，返回入口文件
app.get('/AppName/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

方案2：切换为HashHistory模式（无需修改服务端配置） #

如果暂时无法修改服务端配置，可以将React Router的history模式切换为HashHistory，路由路径会自动带上#标识，#后的内容不会发送到服务端，服务端只会请求 /AppName/ 下的入口文件，再由客户端解析路由加载对应组件。
React Router v5修改示例：

// 原有引入替换即可
// import { BrowserRouter as Router } from 'react-router-dom'
import { HashRouter as Router } from 'react-router-dom'

该方案缺点为URL会携带#标识，美观度稍差。

• 确认打包配置的公共路径正确：package.json中homepage字段配置为/AppName，或webpack配置中publicPath配置为/AppName/，避免静态资源路径错误。
• 确认路由路径拼接逻辑正确：appPath末尾需携带斜杠，或拼接路径时主动添加斜杠，避免拼接后出现/AppNameWizard这类错误路径导致匹配失败。
• 若使用BrowserRouter组件可直接配置basename="/AppName"属性，路由路径可省略appPath前缀，简化路径拼接逻辑。

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