如何在react-router-dom v6中不使用Link标签传递路由参数

问题根源 #

react-router-dom 从v6.0.0-beta版本开始正式移除了useHistory钩子，替换为useNavigate钩子实现编程式导航，你遇到的导出报错、history.push不存在都是版本API变更导致的。

具体实现步骤 #

1. 卡片列表页逻辑实现 #

• 从react-router-dom导入useNavigate钩子
• 调用钩子获取navigate方法
• 在卡片的onClick事件中调用navigate，第二个参数的state字段携带卡片id参数
  示例代码：

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

// 组件内部逻辑
const CardList = () => {
  const navigate = useNavigate();

  const handleCardClick = (id: number) => {
    // 第一个参数为目标路由路径，第二个参数为配置项
    navigate('/target-page-route', { state: { cardId: id } });
  };

  return (
    <div className="card-list">
      {cardData.map(item => (
        <div 
          key={item.id} 
          className="card"
          onClick={() => handleCardClick(item.id)}
        >
          {/* 卡片渲染内容 */}
        </div>
      ))}
    </div>
  )
}

2. 目标页接收参数 #

使用useLocation钩子获取传递的state参数即可：

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

const TargetPage = () => {
  const location = useLocation();
  // 可选链操作符避免state为空时报错
  const cardId = location.state?.cardId;

  // 后续使用cardId执行业务逻辑
  return <div>当前访问的卡片ID为：{cardId}</div>
}

TypeScript类型适配（可选） #

如果需要给state添加类型提示，可以扩展Location类型：

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

// 自定义state类型
type CustomLocationState = {
  cardId: number;
}

// 组件内使用时指定类型
const location = useLocation() as Location<CustomLocationState>;
// 此时cardId有完整的类型校验和提示
const cardId = location.state.cardId;

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