React静态S3站点访问/home路由报Key Not Found，求自动跳转方案

一、先修复直接访问/home的404错误 #

S3静态网站托管默认仅识别根路径的index.html，当用户直接访问/home这类客户端路由时，S3会误将其当作存储对象的键（也就是尝试查找home/home这个不存在的文件，这正是你看到的错误）。要让React Router接管所有路由解析，需配置S3的错误文档：

• 登录AWS控制台，进入目标S3存储桶
• 打开「静态网站托管」设置面板
• 将「错误文档」的对象键设置为index.html
• 保存配置

此后S3找不到对应路径的对象时，会返回根目录的index.html，由React Router处理客户端路由，直接访问/home即可正常加载页面。

二、根路径自动跳转至/home的两种方案 #

方案1：React代码层面实现 #

修改根目录对应的React组件（你的Coverpage），在组件挂载时自动触发跳转：

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Coverpage: React.FC = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // 组件加载完成后立即跳转到/home
    navigate("/home");
  }, [navigate]);

  return (
    <>
      <div>I am cover page!</div>
      <button onClick={() => navigate("/home")}>Click me to navigate to homepage!</button>
    </>
  );
};

export default Coverpage;

如果不需要保留cover页面，也可以直接在路由配置里设置根路径重定向：

import { createBrowserRouter, RouterProvider, Navigate } from "react-router-dom";
import Home from "./Home";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/home" replace />,
  },
  {
    path: "/home",
    element: <Home />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

方案2：AWS S3配置层面实现（无需修改代码） #

通过S3的重定向规则实现根路径自动跳转：

1. 进入S3存储桶的「静态网站托管」设置
2. 在「重定向规则」中添加以下XML配置：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals></KeyPrefixEquals>
      <HttpErrorCodeReturnedEquals>200</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>你的站点域名（如xxxx.com）</HostName>
      <ReplaceKeyPrefixWith>home/</ReplaceKeyPrefixWith>
      <HttpRedirectCode>302</HttpRedirectCode> <!-- 永久跳转可改为301 -->
    </Redirect>
  </RoutingRule>
</RoutingRules>

该规则会在用户访问根路径（空前缀）且S3返回200状态码时，自动将请求重定向到/home路径。

注意：使用此方案前必须先完成第一部分的错误文档配置，否则直接访问/home仍会报错。

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