React Router Link右键单击不起作用

import React from 'react';
import { useHistory } from 'react-router-dom';

const CustomLink = ({ to, children }) => {
  const history = useHistory();

  const handleClick = (event) => {
    if (event.button === 2) { // 右键点击
      event.preventDefault();
      history.push(to);
    }
  };

  return (
    <a href={to} onClick={handleClick}>
      {children}
    </a>
  );
};

export default CustomLink;

import React from 'react';
import { useHistory } from 'react-router-dom';

const CustomLink = ({ to, children }) => {
  const history = useHistory();

  const handleContextMenu = (event) => {
    event.preventDefault();
    history.push(to);
  };

  return (
    <a href={to} onContextMenu={handleContextMenu}>
      {children}
    </a>
  );
};

export default CustomLink;

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

const CustomLink = ({ to, children }) => {
  const navigate = useNavigate();

  const handleContextMenu = (event) => {
    event.preventDefault();
    navigate(to);
  };

  return (
    <a href={to} onContextMenu={handleContextMenu}>
      {children}
    </a>
  );
};

export default CustomLink;