React Router通用404页面仅在部署版网站index路径生效问题求助

问题根本原因 #

该问题与React Router配置无关，是静态站点托管服务的回退规则缺失导致：

• 本地expo start启动的开发服务器默认会将所有未匹配到静态资源的请求，全部回退到单页应用入口index.html，React Router可以正常加载并捕获无效路径，触发404规则
• 部署后的静态托管服务默认只会响应路径对应存在的静态文件请求，访问/alkjshdakh这类不存在的路径时，服务端会直接返回资源不存在错误（你展示的是AWS S3静态托管的典型AccessDenied错误），你的React应用根本没有被加载，自然不会触发前端的404规则

修复方案 #

核心配置：添加静态托管回退规则 #

根据你使用的托管服务，配置所有请求回退到index.html的规则即可：

• 若使用AWS S3静态托管：进入对应存储桶的「属性」-「静态网站托管」配置页，将404、403错误的响应文档都设置为index.html，响应码填写200
• 若使用Vercel：在项目根目录新建vercel.json，添加如下配置：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

• 若使用Netlify：在项目根目录新建_redirects文件，添加如下内容：

/*    /index.html   200

• 若使用Nginx托管：在站点配置的server块中添加如下规则：

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

可选优化：React Router配置调整 #

你当前的配置已经可以正常使用，也可以调整为直接渲染404组件，避免额外跳转：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import MainPage from "./assets/pages/index";
import NotFoundPage from './assets/pages/404';

class App extends Component {
  render() {
    return (
    <Router>
      <Switch>
        <Route exact path = "/" component = {MainPage} />
        <Route component = {NotFoundPage} />
      </Switch>
    </Router>
    );
  }
}

export default App;

调整后所有未匹配路径会直接渲染404组件，无需跳转到/404路径。

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