React路由用navigate()传参，目标页面route为undefined

问题场景 #

在React项目中使用navigate()向另一个路由传递参数时，目标页面无法获取到参数，route参数为undefined。

MainPage.js 代码 #

// API调用后获取以下对象的值
const navigate = useNavigate();

navigate('vapos/filters', {
    FiltersDataList1: FiltersDataList1,  FiltersDataList2: FiltersDataList2,  
    FiltersParamObj1: FiltersParamObj1,  FiltersParamObj2: FiltersParamObj2,  
    FiltersParamLvlObj: FiltersParamLvlObj,  SelectedParams: SelectedParams,  
    handleDropDownChange: handleDropDownChange,  handleSingleSelectChange: handleSingleSelectChange,  
    AppliedFiltersData: AppliedFiltersData,  handleFiltersSubmit: handleFiltersSubmit, 
});

FiltersPage.js 代码 #

export default function FiltersPage({ route }) 
{
console.log('**********************')
console.log(route)

const {FiltersDataList1, FiltersDataList2, AppliedFiltersData, 
  FiltersParamObj1, FiltersParamObj2, FiltersParamLvlObj, 
  SelectedParams, handleDropDownChange, handleSingleSelectChange, handleSubmit} = route.params;

}

路由配置代码 #

export default function Router() 
{
  const routes = useRoutes([
    {
      path: '/',
      children: [
        { element: <Navigate to="/home" />, index: true },
        { path: 'home', element: <HomePage /> },
        { path: 'vapos/*', element: <MainPage /> },
        { path: 'underConstruction', element: <UnderConstruction /> },
      ],
    },
    {
      path: '/vapos/',
      children: [
        { path: 'vapos/main', element: <MainPage /> },
        { path: 'vapos/filters', element: <FiltersPage /> },
        { path: 'vapos/outliers', element: <Outliers /> },
      ],
    },    
    {
      path: '*',
      element: <HomePage />,
    },
  ]);

  return routes;
}

错误原因分析 #

1. 路由路径配置错误：父路由path: '/vapos/'下的子路由path重复添加了vapos/，导致实际路由路径变为/vapos/vapos/filters，与navigate跳转的路径不匹配。
2. navigate传参方式错误：React Router的navigate函数传递参数必须放在state字段中，不能直接写在第二个参数的顶层。
3. 参数获取方式错误：React Router v6中，函数组件无法通过props直接获取route对象，需使用useLocation钩子获取传递的state参数。
4. 函数序列化问题：传递函数作为参数会触发序列化失败（React Router的state会被序列化存储），导致参数丢失或报错。

修正步骤 #

1. 修正路由配置 #

将/vapos/下的子路由path改为相对路径，去掉重复的vapos/：

export default function Router() 
{
  const routes = useRoutes([
    {
      path: '/',
      children: [
        { element: <Navigate to="/home" />, index: true },
        { path: 'home', element: <HomePage /> },
        { path: 'vapos/*', element: <MainPage /> },
        { path: 'underConstruction', element: <UnderConstruction /> },
      ],
    },
    {
      path: '/vapos/',
      children: [
        { path: 'main', element: <MainPage /> },
        { path: 'filters', element: <FiltersPage /> },
        { path: 'outliers', element: <Outliers /> },
      ],
    },    
    {
      path: '*',
      element: <HomePage />,
    },
  ]);

  return routes;
}

2. 修正navigate传参方式 #

将参数放入state字段中，同时使用绝对路径避免相对路径歧义：

const navigate = useNavigate();

navigate('/vapos/filters', {
  state: {
    FiltersDataList1: FiltersDataList1,
    FiltersDataList2: FiltersDataList2,
    FiltersParamObj1: FiltersParamObj1,
    FiltersParamObj2: FiltersParamObj2,
    FiltersParamLvlObj: FiltersParamLvlObj,
    SelectedParams: SelectedParams,
    AppliedFiltersData: AppliedFiltersData
  }
});

3. 修正FiltersPage参数获取方式 #

使用useLocation钩子获取state参数：

import { useLocation } from 'react-router-dom';

export default function FiltersPage() {
  const location = useLocation();
  console.log('传递的参数：', location.state);

  // 用|| {}避免state为undefined时解构报错
  const {
    FiltersDataList1,
    FiltersDataList2,
    AppliedFiltersData,
    FiltersParamObj1,
    FiltersParamObj2,
    FiltersParamLvlObj,
    SelectedParams
  } = location.state || {};

  // 后续组件逻辑
}

4. 函数参数的替代方案 #

由于React Router的state会被序列化，不能传递函数。如果需要在两个组件间共享函数逻辑，建议：

• 将函数提取到公共工具模块，在两个组件中分别导入调用。
• 使用React Context或状态管理库（如Redux、Zustand）管理状态和回调函数。

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