react-router-dom长JWT参数路由加载失败问题求助

我配置了一个接收JWT令牌作为路径参数的VerifyEmail路由，但该路由无法正常加载。当令牌较短（约10个字符）时路由可以正常加载，令牌长度增加后就失效了，想确认是否是react-router-dom的URL路径长度限制导致的这个问题？

代码示例 #

App.jsx #

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home"
import Login from "./components/Login"
import Logout from "./components/Logout"
import SignUp from "./components/SignUp"
import Navbar from "./components/Navbar"
import VerifyEmail from "./features/users/VerifyEmail"
import { selectCurrentToken } from './features/auth/authSlice'
import { useSelector } from "react-redux/es/hooks/useSelector";

function App() {
  const auth = useSelector(selectCurrentToken)

  return (
    <>
      <BrowserRouter>
        <Navbar auth={auth} />
        <Routes>
          <Route index element={<Home />} />
          {!auth && <Route path="/login" element={<Login />} />}
          {auth && <Route path="/logout" element={<Logout />} />}
          <Route path="/signup" element={<SignUp />} />
          <Route path="/verify/:token" element={<VerifyEmail />} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App

VerifyEmail.jsx #

import React from 'react'
import { useParams } from 'react-router-dom'

const VerifyEmail = () => {
  const { token } = useParams()

  return (
    <div>{token}</div>
  )
}

export default VerifyEmail

访问以下链接时会返回错误请求：
http://localhost:5173/verify/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImUiLCJpYXQiOjE2OTE1NDkwMjcsImV4cCI6MTY5MTU3MDYyN30.HqPtksRbGTxxP8EeFs7XLHfHQLBXleaVil6MYmiKB3Y

原因与解决方法 #

react-router-dom本身没有路径长度限制，问题出在你使用的开发服务器（这里是Vite，端口5173是Vite默认端口）的配置上。

Vite默认会把包含.的路径当成静态资源请求处理，而长JWT里包含多个.，服务器会尝试查找对应的静态文件，找不到就返回404错误。短令牌如果没有.或者.在末尾，服务器不会触发这个逻辑，所以能正常路由到React组件。

解决方法：修改Vite配置，让所有路径都交由React Router处理。在vite.config.js中添加以下配置：

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

export default defineConfig({
  plugins: [react()],
  server: {
    fallback: 'index.html' // 让所有404请求都返回index.html，交由React Router处理
  }
})

或者使用匹配特定路径的重写规则：

export default defineConfig({
  plugins: [react()],
  server: {
    rewrite: {
      '^/verify/.*': '/index.html'
    }
  }
})

修改后重启开发服务器，长JWT作为路径参数的路由就能正常加载了。

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