React Router Dom V6页面刷新后丢失查询参数问题求助

核心原因 #

你遇到的问题本质是单页应用（SPA）的服务器配置缺失：当刷新带查询参数的路由时，服务器没有正确返回前端入口文件index.html，而是尝试查找对应物理文件，触发404后可能自动重定向，导致查询参数被丢弃。

解决方案 #

一、确认路由配置正确性 #

先确保你的路由结构是嵌套关系，确保react-router-dom能正确解析带参数的路径：

import { Routes, Route } from 'react-router-dom';
import SearchSubscriber from './SearchSubscriber';
import Subscriber from './Subscriber';

function App() {
  return (
    <Routes>
      <Route path="/subscriber" element={<SearchSubscriber />}>
        <Route path=":key" element={<Subscriber />} />
      </Route>
      {/* 其他路由 */}
    </Routes>
  );
}

二、修复服务器配置（关键） #

根据你使用的开发/生产环境，配置服务器让所有前端路由请求都返回index.html：

1. Vite（你当前用的5173端口属于Vite）

在vite.config.js中添加fallback配置：

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

export default defineConfig({
  plugins: [react()],
  server: {
    fallback: 'index.html'
  }
});

2. 生产环境（以Nginx为例）

修改Nginx配置文件，添加路由 fallback 规则：

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

3. 托管平台（Netlify/Vercel）

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

  /*    /index.html   200
  

• Vercel：创建vercel.json文件，内容为：

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

三、代码优化（可选） #

1. 跳转时使用绝对路径，避免相对路径的潜在问题：

async function handleSearch(event) {
  event.preventDefault();

  navigate({
    pathname: `/subscriber/${searchProperties.value}`, // 改为绝对路径
    search: createSearchParams({
      searchType: searchProperties.type,
    }).toString(),
  });
}

2. 给查询参数添加默认值，避免参数丢失时页面异常：

export default function Subscriber() {
  const { key } = useParams();
  const [queryParameters] = useSearchParams();
  const searchType = queryParameters.get("searchType") || "document";

  return (
    <>
      Searching {searchType} for {key}
    </>
  );
}

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