React中如何在ActiveSearch组件获取NavLink选中项的label值

这里提供两种常用的实现方式，根据你的需求选择即可：

方法一：通过URL查询参数传递（适合需要在URL中可见的场景） #

这种方式会把label值附加到URL上，刷新页面后数据不会丢失。

修改NavLink的跳转配置 #

在Header组件的NavLink中，将label作为查询参数传入：

<NavLink 
  to={{
    pathname: '/budget/active-search',
    // 用encodeURIComponent处理特殊字符，避免URL解析异常
    search: `?label=${encodeURIComponent(item.label)}`
  }}
>
  {item.label}
</NavLink>

在ActiveSearch组件中获取参数 #

使用react-router-dom提供的useSearchParams钩子读取参数：

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

function ActiveSearch() {
  const [searchParams] = useSearchParams();
  // 获取label参数，若不存在则返回默认值
  const selectedLabel = searchParams.get('label') || '未选择标签';

  return (
    <div>
      <h2>当前选中标签：{selectedLabel}</h2>
      {/* 组件其他内容 */}
    </div>
  );
}

方法二：通过路由state传递（适合不需要暴露在URL的场景） #

这种方式的参数不会出现在URL中，但刷新页面后state数据会丢失（仅存在内存中）。

修改NavLink的跳转配置 #

在to对象中添加state属性携带label值：

<NavLink 
  to={{
    pathname: '/budget/active-search',
    state: { label: item.label }
  }}
>
  {item.label}
</NavLink>

在ActiveSearch组件中获取state #

使用useLocation钩子读取路由携带的state：

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

function ActiveSearch() {
  const location = useLocation();
  // 用可选链操作符避免页面刷新后state不存在导致的报错
  const selectedLabel = location.state?.label || '未选择标签';

  return (
    <div>
      <h2>当前选中标签：{selectedLabel}</h2>
      {/* 组件其他内容 */}
    </div>
  );
}

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