React Router v6中如何通过组件修改URL参数并重新渲染页面？

直接更新URL参数是更合理的方案，既能保证浏览器历史记录的连贯性（用户可以通过前进/后退切换不同国家的数据），又能借助React Router和React Query的特性自动完成数据更新，完全符合单页应用的路由设计逻辑。

具体实现步骤 #

1. 在ChartsPage组件中引入useNavigate钩子，用于修改URL参数
2. 下拉框的onChange事件触发时，调用navigate方法更新路由中的:id参数
3. 由于useQuery的查询依赖是从useParams获取的id，当URL参数变化时，useParams返回新值，React Query会自动重新执行API请求

代码示例 #

import { useParams, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';

const ChartsPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  // React Query 请求，依赖id参数
  const { data, isLoading } = useQuery({
    queryKey: ['chartData', id],
    queryFn: () => fetch(`/api/charts/${id}`).then(res => res.json()),
  });

  // 下拉框 onChange 处理函数
  const handleCountryChange = (e) => {
    const selectedCountryId = e.target.value;
    // 更新URL参数，触发路由变化
    navigate(`/charts/${selectedCountryId}`);
  };

  return (
    <div>
      <select value={id} onChange={handleCountryChange}>
        <option value="cn">中国</option>
        <option value="us">美国</option>
        <option value="jp">日本</option>
      </select>
      {isLoading ? <div>加载中...</div> : <div>{/* 渲染图表数据 */}</div>}
    </div>
  );
};

export default ChartsPage;

为什么不推荐只更新API参数不更新URL？ #

如果只是在组件内部修改API请求参数而不更新URL，会导致以下问题：

• 浏览器地址栏不会同步变化，用户刷新页面会回到初始的id参数，丢失当前选择的国家
• 无法利用浏览器的前进/后退功能切换不同的查询状态
• 不符合路由驱动状态的单页应用设计原则，状态和路由不统一

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