使用react-router-dom时直接访问非首页路由出现404的原因与解决方法

嘿，这个问题我见过好多React新手碰到，其实本质是客户端路由和服务器路由的差异导致的，我给你一步步讲明白～

React Router属于客户端路由——意思是当你从首页点击About这类链接时，页面跳转完全是在浏览器端完成的：React Router只是更新了地址栏的URL，然后渲染对应的组件，根本没向服务器发新的请求。

但当你直接在地址栏输入www.xxx.com/about时，浏览器会直接给服务器发请求，要获取/about路径对应的资源。而你的服务器默认只知道根路径/对应index.html，它不知道/about是React Router定义的客户端路由，所以就返回404错误了。

核心思路就是：让服务器把所有路由请求都转发到index.html，剩下的路由逻辑交给React Router处理。不同部署环境的配置方式不一样，我给你列几个常见的：

Nginx部署 #

修改你的Nginx配置文件，添加路由转发规则：

server {
  listen 80;
  server_name www.xxx.com;
  root /path/to/your/react/app/build; # 你的React项目build文件夹路径
  index index.html;

  # 关键：所有请求都指向index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改完重启Nginx就生效了。

Apache部署 #

在你的项目build目录下创建一个.htaccess文件，写入以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
# 如果请求的文件/目录不存在，就转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Netlify/Vercel托管 #

• Netlify：在项目根目录创建_redirects文件，内容只需要一行：

  /*    /index.html   200
  

• Vercel：基本不需要额外配置，如果遇到问题，创建vercel.json文件：

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

额外提醒：处理真实的404 #

这样配置后，哪怕你访问一个完全不存在的路由（比如/random-xxx），服务器也会返回index.html。所以你需要在React Router里加一个兜底的404组件，比如：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/post" element={<Post />} />
      <Route path="/account" element={<Account />} />
      {/* 捕获所有未匹配的路由，显示自定义404页面 */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

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