React中SVG地图区域点击导航实现方案咨询

实现方法 #

1. 结合React Router实现跳转（推荐） #

直接给SVG的<path>绑定onClick事件，通过React Router的导航API完成跳转并传递参数，无需嵌套<a>标签：

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

const SVGMap = () => {
  const navigate = useNavigate();

  // 处理区域点击逻辑
  const handleAreaClick = (areaTitle) => {
    // 方式1：通过state传递参数（页面刷新后会丢失，适合临时数据）
    navigate('/area-detail', {
      state: { title: areaTitle }
    });

    // 方式2：通过URL query传递参数（刷新后保留）
    // navigate(`/area-detail?title=${encodeURIComponent(areaTitle)}`);
  };

  return (
    <svg viewBox="0 0 800 600">
      {/* Manhattan区域路径 */}
      <path
        d="M100,200 L150,100 L200,200 Z"
        onClick={() => handleAreaClick('Manhattan')}
        className="area-path" // 你的高亮样式类
        style={{ cursor: 'pointer' }} // 提示可点击
      />
      {/* 其他区域路径同理 */}
    </svg>
  );
};

在目标页面接收参数：

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

const AreaDetailPage = () => {
  const location = useLocation();
  
  // 接收state参数
  const areaTitle = location.state?.title;
  
  // 接收query参数的方式
  // const searchParams = new URLSearchParams(location.search);
  // const areaTitle = searchParams.get('title');

  return <h1>{areaTitle}</h1>;
};

2. 原生JS跳转（无React Router场景） #

如果不用路由库，直接用window.location完成跳转：

const handleAreaClick = (areaTitle) => {
  window.location.href = `/area-detail?title=${encodeURIComponent(areaTitle)}`;
};

SVG适配注意点 #

• 给可点击的<path>添加cursor: pointer样式，提升交互提示
• 若点击无响应，检查是否设置了pointer-events: none，可手动设置pointer-events: all确保路径可被点击

精准搜索关键词 #

• React SVG path onClick navigation
• React SVG route with parameters
• SVG path click handler React Router
• React pass data on SVG area click

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