React Router DOM带JWT的激活路由404问题求助

问题重现 #

配置的路由代码如下：

<Route path={'activate/:activateToken'} element={<p>Test</p>} />

尝试访问带完整JWT的URL时返回404：

http://localhost:5173/activate/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Ijg5NDA5MTFjZjFAZmlyZWJveG1haWwubG9sIiwiaWF0IjoxNjg1MjY1NTUwLCJleHAiOjE2ODUzNTE5NTB9.wPnwsSo0Ksz6NYUt5XbpnI485v7FQST1yAZcLmCHJFQ

Chrome提示：This localhost page can’t be found，但使用较短的JWT时能正常访问。

核心原因 #

并非JWT的字符或长度问题——JWT采用的Base64URL编码（将+替换为-，/替换为_，去除末尾=）完全符合URL规范。问题出在单页应用(SPA)的路由模式：
当使用React Router的BrowserRouter（默认的HTML5 History模式）时，直接访问嵌套路由或带参数的路由，服务器会尝试查找对应物理文件，找不到就返回404。短JWT能访问属于测试时的偶然情况，本质是服务器未配置SPA路由的 fallback 规则。

解决方案 #

根据项目构建工具和部署环境，选择以下配置：

1. Vite 开发/生产环境配置 #

• 开发环境：修改vite.config.js，添加服务器 fallback 规则：

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

export default defineConfig({
  plugins: [react()],
  server: {
    fallback: 'index.html' // 所有未匹配的请求转发到index.html
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined
      }
    }
  }
})

• 生产环境部署（如Nginx）：添加try_files配置：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/dist;

  location / {
    try_files $uri $uri/ /index.html; # 转发所有请求到index.html
  }
}

2. Create React App 项目 #

• 开发环境：react-scripts已默认处理SPA路由，无需额外配置。
• 生产环境部署（如Nginx）：同样添加try_files规则（同上Nginx配置）。

3. 临时替代方案（不推荐生产用） #

改用HashRouter代替BrowserRouter，路由参数会放在URL的哈希段（#之后），服务器不会解析哈希部分，直接交给客户端处理：

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

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/activate/:activateToken" element={<p>Test</p>} />
      </Routes>
    </HashRouter>
  );
}

缺点是URL会带有#，不利于SEO和用户体验。

验证方案 #

配置完成后，重启开发服务器或重新部署生产环境，再次访问带完整JWT的URL即可正常匹配路由。

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