React-Router-V6传递路由参数后如何实现页面重新渲染？

看起来你的核心问题是：通过navigate跳转到同一路由但不同id参数时，组件能获取到参数却不会触发重渲染，监听id的useEffect也没生效。我来帮你分析原因并给出具体解决方案：

一、核心问题定位：参数获取方式错误 #

你的useQuery如果是基于react-router-dom的useLocation实现的，它返回的是URLSearchParams实例而非普通JS对象。你现在用const { id } = useQuery();的解构方式根本拿不到id值——URLSearchParams没有id属性，这会导致id始终是undefined，自然useEffect的依赖不会变化，组件也不会重渲染。

二、分步解决方案 #

1. 修正Query参数的获取逻辑 #

先确保你正确实现并使用useQuery：

// 先实现正确的useQuery自定义Hook（如果还没实现）
import { useLocation } from 'react-router-dom';

export function useQuery() {
  const location = useLocation();
  return new URLSearchParams(location.search);
}

// 在DJRadio组件中修改id的获取方式
const query = useQuery();
// 将获取到的字符串id转为数字（和你的element.id类型统一）
const id = query.get('id') ? Number(query.get('id')) : undefined;
const currentID = id;

2. 修复useEffect的监听逻辑 #

调整useEffect的依赖项，同时增加非空判断避免无效请求：

useEffect(() => {
  // 仅当id存在时触发数据请求
  if (id) {
    // 如果你的getRadioDataAction需要id参数，记得传递进去
    dispatch(getRadioDataAction(id));
  }
}, [id, dispatch]); // 加上dispatch作为依赖（Redux的dispatch是稳定的，但添加后更严谨）

3. （可选）改用动态路由参数更可靠 #

如果你的业务是通过id区分不同分类页面，推荐用动态路由参数代替Query参数，参数变化时组件重渲染会更稳定：

修改路由配置：

{
  path: "/discover/djradio",
  element: <DJRadio />,
  children: [
    // 把Query参数改为动态路由参数
    { path: "/discover/djradio/category/:id", element: <Category /> },
  ],
},

在组件中用useParams获取id：

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

// 在DJRadio组件内获取参数
const { id } = useParams<{ id: string }>();
const currentID = id ? Number(id) : undefined;

// 修改跳转方法
function handleClickTo(id: number) {
  const wantUrl = `/discover/djradio/category/${id}`;
  navigate(wantUrl);
}

4. 关于memo的说明 #

你的组件用了memo包裹，但memo只作用于props的浅比较，而id是组件内部通过Hook获取的状态，所以memo不会阻止组件因内部状态变化触发的重渲染，这部分无需修改。

三、验证效果 #

完成上述修改后，点击不同分类按钮：

• id会正确更新为当前分类的ID
• useEffect会触发对应的数据请求
• 组件会根据新id重新渲染，更新active类名和相关内容

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