如何用TypeScript编写通用点击跳转React自定义Hook

自定义Hook实现 #

首先修正语义和类型定义，封装后的通用跳转Hook代码如下（适配Next.js路由，如果你用的是其他路由框架替换路由跳转逻辑即可）：

import { useRouter } from 'next/router';
import { MouseEventHandler, useCallback } from 'react';

interface UseNavigateClickProps {
  // 跳转目标路径
  pathname: string;
  // 路由传参，适配标准键值对格式
  query?: Record<string, string | number | boolean | undefined | null>;
  // 是否阻止默认事件，默认开启
  preventDefault?: boolean;
  // 可选：跳转前执行的自定义逻辑，比如埋点、校验
  onBeforeNavigate?: () => void;
}

export const useNavigateClick = ({
  pathname,
  query = {},
  preventDefault = true,
  onBeforeNavigate,
}: UseNavigateClickProps): MouseEventHandler<HTMLElement> => {
  const router = useRouter();

  // 用useCallback缓存函数，避免绑定元素不必要的重渲染
  const handleClick = useCallback<MouseEventHandler<HTMLElement>>(
    (e) => {
      preventDefault && e.preventDefault();
      onBeforeNavigate?.();
      router.push({
        pathname,
        query,
      });
    },
    [router, pathname, query, preventDefault, onBeforeNavigate]
  );

  return handleClick;
};

组件内调用示例 #

直接在需要绑定点击跳转的组件内调用Hook，传入对应参数即可拿到onClick处理函数：

import { useNavigateClick } from '@/hooks/useNavigateClick';

const DemoComponent = () => {
  // 动态配置跳转路径、参数和前置逻辑
  const handleItemClick = useNavigateClick({
    pathname: '/new_page',
    query: {
      id: '123',
      source: 'home_list'
    },
    onBeforeNavigate: () => {
      console.log('clicked item')
      // 可在此处添加自定义逻辑
    }
  });

  return (
    // 直接绑定到元素的onClick属性即可
    <div onClick={handleItemClick}>
      点击跳转到新页面
    </div>
  );
};

补充说明 #

• 把Hook命名为useNavigateClick比原useMouse语义更清晰，后续维护时可以快速识别功能
• 该Hook支持绑定到所有带onClick属性的元素，不限制div，按钮、a标签都可以使用
• 如果是Next.js 13+ App Router版本，仅需要把useRouter的引入路径改为import { useRouter } from 'next/navigation'即可，其余逻辑不用修改

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