导航按钮跳转异常求助：点击联系按钮无法定位至页面顶部

1. 修复按钮跳转的嵌套冲突 #

你当前代码在<button>内嵌套<Link>，会触发双重点击事件，干扰路由跳转行为。推荐两种修正方式：

方案A：用Link直接实现按钮样式（更简洁） #

把按钮的CSS类直接应用到<Link>上，移除外层冗余的<button>：

<Link 
  to="contact" 
  className="items-center w-max rounded-md bg-indigo-600 px-7 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
  Send
</Link>

方案B：用useNavigate钩子处理点击（保留按钮标签） #

如果必须保留<button>，可以通过useNavigate手动跳转并强制滚动到顶部：

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

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

const handleContactJump = () => {
  navigate('contact');
  window.scrollTo(0, 0); // 强制定位到页面顶部
};

// 按钮渲染代码
<button 
  type="button" 
  className="items-center w-max rounded-md bg-indigo-600 px-7 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
  onClick={handleContactJump}
>
  Send
</button>

2. 全局解决路由/刷新的滚动位置问题 #

React Router默认会保留用户之前的滚动位置，导致刷新或跳转时停留在原位置。可以通过全局配置强制每次路由变化后回到顶部：

方式1：全局滚动监听组件 #

创建一个通用组件，监听路由路径变化并触发滚动：

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

将该组件放在路由根容器内（比如<App>组件）：

import { BrowserRouter as Router } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

function App() {
  return (
    <Router>
      <ScrollToTop />
      {/* 你的其他路由组件 */}
    </Router>
  );
}

方式2：路由配置直接设置滚动行为（适用于createBrowserRouter） #

如果使用createBrowserRouter初始化路由，可直接配置scrollBehavior：

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

const router = createBrowserRouter([
  // 你的路由列表配置
], {
  scrollBehavior: () => ({ top: 0 }) // 所有跳转强制回到顶部
});

问题根源说明 #

• 按钮嵌套Link：双重可点击元素会引发事件冒泡，干扰路由跳转的默认逻辑，甚至可能触发两次跳转。
• 滚动位置保留：React Router默认开启滚动恢复功能，会记录用户之前的滚动位置，导致刷新或跳转时停留在原位置。

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