React Router Dom Link组件点击后URL无变化问题咨询

错误原因 #

Link是需要渲染到DOM树中的交互组件，不能直接写在onClick事件的回调函数里。回调中编写的JSX不会被框架渲染到页面，因此不会触发任何跳转逻辑，这是你当前问题的核心诱因。

解决方案 #

推荐优先使用编程式导航适配Three.js场景的点击需求：

1. 从react-router-dom导入useNavigate钩子
2. 在组件内调用钩子生成导航函数
3. 直接在mesh的onClick回调中调用导航函数完成跳转

完整代码示例：

import React from "react";
import { useFrame } from "@react-three/fiber";
import Eliptical from "./Eliptical";
import { Html } from "@react-three/drei";
// 导入useNavigate钩子
import { useNavigate } from "react-router-dom";

export default function Planet({ planet: { color, xRadius, zRadius, size, speed, offset,Name = ""} }) {
  // 初始化导航函数
  const navigate = useNavigate();
  // ... 其余原有逻辑

  return (
    <>
      <mesh ref={planetRef} onClick={(e) => {
        // 调用函数跳转至目标路径
        navigate("/Projects");
      }}>
      {/* 原有mesh的子元素逻辑 */}
      </mesh>
    </>
  )
}

如果你坚持要用Link组件实现，需要将Link渲染到DOM树中，由于3D元素无法直接作为Link的子元素，需要用Html组件嵌套2D交互层：

import { Link } from "react-router-dom";
import { Html } from "@react-three/drei";

// 渲染部分代码
<mesh ref={planetRef}>
  <Html>
    <Link to="/Projects">
      {/* 放置覆盖在星球上的可点击透明层/展示文字 */}
      <div style={{ width: '80px', height: '80px', cursor: 'pointer', background: 'transparent' }} />
    </Link>
  </Html>
  {/* 原有mesh的子元素逻辑 */}
</mesh>

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