React Router Dom线上页面404，本地运行正常问题求助

核心原因 #

本地开发时Vite内置服务器会自动处理单页应用的路由 fallback，但线上静态服务器默认不会将所有路径请求转发到index.html，直接访问/about这类路由时，服务器找不到对应文件就会返回404。同时代码里的路由结构和Link配置也存在问题，加重了这个情况。

解决方案 #

1. 修正路由组件结构与Link配置 #

你的代码存在两个明显问题：

• Intro组件在Router外部，导致无论访问哪个路由都会显示该组件；
• NavBar仅在根路径渲染，且部分Link的to属性或target配置错误，导致路由跳转异常。

修正后的App组件：

import React from "react";
import NavBar from "./NavBar";
import Intro from "./Intro";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      {/* 将NavBar放在Router内部、Routes外部，实现全局导航 */}
      <NavBar />
      <Routes>
        {/* 根路径渲染Intro组件 */}
        <Route path="/" element={<Intro />} />
        {/* About路径渲染About组件 */}
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

修正后的NavBar组件：

import React from "react";
import { Link } from "react-router-dom";
function NavBar() {
  return (
    <nav>
      <div className="itemL">
        {/* 点击logo跳转到首页 */}
        <Link to="/">mjshubham21</Link>
      </div>
      <div className="itemR">
        <ul>
          <li>
            {/* Home链接指向根路径，而非锚点 */}
            <Link to="/">Home</Link>
          </li>
          <li>
            {/* 去掉target="_blank"，避免新开标签页触发服务器直接请求 */}
            <Link to="/about">About Me</Link>
          </li>
        </ul>
      </div>
    </nav>
  );
}

export default NavBar;

2. 配置线上服务器的路由 fallback #

根据你使用的部署平台，添加对应的配置让所有路由请求转发到index.html：

• Nginx：修改配置文件，添加try_files规则

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

• Netlify：在项目根目录创建_redirects文件，内容如下

/*    /index.html   200

• Vercel：在项目根目录创建vercel.json文件

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

• Vite基础配置：如果部署在子路径下，需在vite.config.js中设置base（根域名部署可忽略）

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

export default defineConfig({
  plugins: [react()],
  base: '/' // 若部署在https://xxx.com/portfolio，改为'/portfolio/'
})

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