React Router v6.15.0仅渲染首页，刷新其他路由出现404求助

问题根源 #

用createBrowserRouter时采用的是HTML5 History模式，前端跳转路由属于客户端行为，但刷新页面时浏览器会直接向服务器请求对应路径的资源——服务器上根本没有/app-configs这类静态文件，自然返回404。只有首页/是服务器默认返回的入口文件（比如index.html），所以刷新首页没问题。要解决这个问题，得让服务器把所有路由请求都重定向到入口文件，交给React Router处理路由匹配。

分场景解决 #

1. 本地开发环境 #

如果用Vite

在vite.config.js中开启History模式支持：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    historyApiFallback: true,
  },
});

如果用Create React App

构建完成后不要直接打开build文件夹，用serve工具启动并指定重定向规则：

# 先全局安装serve
npm install -g serve
# 启动时加-s参数，将所有请求导向index.html
serve -s build

2. AWS Amplify部署 #

方法一：配置amplify.yml

在项目根目录创建或修改amplify.yml，添加重写规则：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewriteRules:
    - source: /<*>/
      target: /index.html
      status: 200

方法二：Amplify控制台配置

登录Amplify控制台找到你的项目，进入Rewrites and redirects页面，添加一条规则：

• Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
• Target address: /index.html
• Type: 选择200 (Rewrite)

代码确认 #

你的路由配置本身没问题，注意Layout组件里必须包含<Outlet />，否则子路由内容无法渲染：

// Layout组件示例
import { Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <div>
      {/* 这里放置导航栏等公共内容 */}
      <Outlet /> {/* 子路由的页面会渲染在这个位置 */}
    </div>
  );
}

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