React应用直接访问website.com/newPage子路由无法加载解决方案

你检索不到参考是因为没对应到正确关键词，这类问题涉及两个核心技术点：

• 单页应用（SPA）客户端路由（Client-Side Routing）匹配规则
• History 路由模式的服务端回退（Fallback）配置

1. 先修正前端路由代码错误 #

你当前代码有三个直接导致路由失效的问题：

• basename配置错误：basename仅在应用部署在域名子路径时需要配置，比如应用部署在website.com/demo/子目录时才需要设置basename="/demo"。你的应用直接部署在website.com根路径，不需要配置该属性，当前写的basename="website"会强制要求所有路由带/website前缀，实际匹配newPage的路径会变成website.com/website/newPage，直接访问website.com/newPage自然无法匹配。
• 组件命名不规范：React 要求自定义组件必须大写首字母，你写的<mainPage />、<newPage />是小写开头，React 会将其识别为原生DOM标签，直接导致渲染报错。
• 冗余属性：React Router v6 版本的Route组件默认就是精确匹配，不需要额外加exact属性。

修正后的代码参考：

<main className="App">
  <Router>
    <Routes>
      <Route path="/" element={<MainPage />} />
      <Route path="/newPage" element={<NewPage />} />
    </Routes>
  </Router>
</main>

2. 配置服务端路由回退规则 #

如果改完前端代码后，本地开发环境访问/newPage正常，部署到生产环境直接访问路径报404，就是服务端没配回退规则：
React 单页应用只有一个index.html入口，你直接在地址栏输入website.com/newPage时，请求会先发往服务端，服务端默认会去找对应路径的静态文件，找不到就返回404，不会把路由控制权交给前端React Router。
你需要给服务端加规则：所有路径的请求，都统一返回根目录的index.html文件，后续路由匹配由浏览器端的React Router完成。
常见部署环境的配置方式：

• Nginx：在站点配置的location /段添加try_files $uri $uri/ /index.html;
• Apache：在站点根目录新建.htaccess文件，配置重写规则将所有请求重定向到index.html
• Vercel/Netlify等静态托管平台：在项目根目录添加对应平台的路由重写配置文件，指定所有路径都指向index.html
• 基于Node.js的服务端（如Express）：添加中间件，所有非静态资源请求都返回index.html文件

• 先修正前端代码，本地启动开发服务，直接访问本地服务的/newPage路径，确认页面正常渲染
• 本地验证通过后部署到生产环境，配置对应服务端的回退规则，再测试直接访问路径的场景

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