React v6路由问题：刷新(F5)页面返回404未找到

你的问题是典型的单页应用（SPA）路由特性导致的：通过导航组件跳转时，是前端JS在处理路由切换，不会向服务器发送新请求；但刷新页面时，浏览器会直接向服务器请求当前URL对应的资源，而服务器上并没有/about、/privacyPolicy这些路径的文件，所以返回404。

下面是几种可行的解决方法：

方法一：针对Create React App项目（适配你的场景） #

Create React App提供了简单的配置方式，只需修改package.json：

1. 打开项目根目录的package.json，添加"homepage": "."字段：

{
  "name": "your-app-name",
  "version": "0.1.0",
  "homepage": ".", // 新增这一行
  // ... 其他原有内容
}

2. 重新执行npm run build生成新的生产构建包
3. 部署更新后的build文件夹即可

方法二：服务器端配置重定向 #

如果是自己部署到Nginx、Apache等服务器，需要配置将所有请求重定向到index.html，让前端路由来处理。

Nginx配置示例 #

在你的Nginx站点配置中添加：

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

Apache配置示例 #

在项目根目录创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

方法三：改用HashRouter（快速临时方案） #

如果不想修改服务器配置，可以将BrowserRouter替换为HashRouter，此时URL会带上#（比如http://xxx.com/#/about），刷新时浏览器只会请求根路径的index.html，由前端处理路由。

修改App.js：

import "./App.css";
import React from "react";
// 替换BrowserRouter为HashRouter
import { HashRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./pages/Home";
import About from "./pages/About";
import PrivacyPolicy from "./pages/PrivacyPolicy";
import TermsOfService from "./pages/TermsOfService";

const App = () => {
  return (
    <HashRouter>         
      <NavBar/>        
      <Routes>
        <Route path="/" element = {<Home/>} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/privacyPolicy" element={<PrivacyPolicy />} />
        <Route path="/termsOfService" element={<TermsOfService />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

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