React执行npm run build后仅渲染首页问题求助

问题说明 #

将React作品集部署到Netlify时，上传build文件夹后首页可正常访问，但/projects、/about等子页面打开时提示链接无效。本地开发环境下路由跳转完全正常，使用react-router-dom v6实现前端路由。

原因 #

Netlify作为静态文件服务器，会直接尝试寻找对应路径的物理文件（比如/projects对应的projects.html），但React单页应用的路由是前端通过JavaScript处理的，服务器不存在这些物理文件，因此返回404。

解决方法 #

方法1：添加_redirects文件（推荐） #

1. 在项目根目录创建名为_redirects的文件，写入以下内容：

/* /index.html 200

2. 重新执行npm run build生成新的build文件夹，Netlify会自动读取这个文件的重写规则，将所有请求转发到index.html，由React Router处理路由。
3. 重新上传更新后的build文件夹到Netlify即可。

方法2：Netlify后台配置重写规则 #

1. 登录Netlify，进入你的站点后台
2. 点击Settings -> Build & Deploy -> Post processing -> Redirects and rewrites
3. 点击Add new redirect rule，填写：
   • Source: /*
   • Destination: /index.html
   • Status code: 200 OK
4. 保存后，Netlify会自动应用规则，刷新页面即可访问子路由。

附用户提供的相关代码 #

App.js（路由配置） #

import { Home } from "./pages/Home";
import { Projects } from "./pages/Projects";
import { About } from "./pages/About";
import "./styles/styles.css";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
const App = () => {
  return (
    <div className="body">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home></Home>}></Route>
          <Route path="/projects" element={<Projects></Projects>}></Route>
          <Route path="/about" element={<About></About>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
};

export default App;

Home.js（首页组件） #

import React from "react";
import { Navbar } from "../components/Navbar";
import { Header } from "../components/Header";
import { Footer } from "../components/Footer";
export const Home = () => {
 return (
   <>
     <Navbar />
     <Header />
     <Footer />
   </>
 );
};

package.json #

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "16.17.1",
    "npm": "8.15.0"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.8",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

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