如何在 Remix.run 中实现页面内平滑滚动导航-js教程-PHP中文网

如何在 Remix.run 中实现页面内平滑滚动导航

本文介绍在 remix.run 应用中实现“点击跳转到指定 id 区域”的原生、可靠且符合服务端渲染（ssr）规范的滚动导航方案，避免直接操作 dom 导致的 hydration 错误，并提供 typescript 安全写法与增强建议。

本文介绍在 remix.run 应用中实现“点击跳转到指定 id 区域”的原生、可靠且符合服务端渲染（ssr）规范的滚动导航方案，避免直接操作 dom 导致的 hydration 错误，并提供 typescript 安全写法与增强建议。

在 Remix.run 中，直接在组件顶层或服务端渲染阶段调用 document.getElementById() 会触发 Hydration mismatch（水合不一致）错误——因为服务端没有 document 对象，而 Remix 默认启用 SSR。因此，像 scrollTo(section: string) 这样的纯客户端 DOM 操作函数不能在 React 组件的渲染函数中同步执行，更不应在服务端上下文里调用。

✅ 正确且最简方案：使用原生标签锚点导航
Remix 完全兼容标准 HTML 锚点行为。只需确保目标元素具有唯一 id，链接设置 href="#your-id" 即可实现平滑滚动（现代浏览器默认支持）：

// 示例：导航按钮 + 目标区块
function Layout() {
  return (
    <div>
      {/* 导航区 */}
      <nav><a href="#features" classname="nav-link">Features</a>
        <a href="#pricing" classname="nav-link">Pricing</a>
        <a href="#contact" classname="nav-link">Contact</a>
      </nav>

      {/* 内容区 */}
      <main><section id="features"><h2>Features</h2>
          <p>...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/1342" title="HeyBoss"><img
														src="https://img.php.cn/upload/ai_manual/000/000/000/175679962099128.png" alt="HeyBoss" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/1342" title="HeyBoss" class="overflowclass">HeyBoss</a>
													<p class="overflowclass">HeyBoss是一款面向小企业和创业者的无代码 AI 网站与应用构建工具。</p>
												</div>
												<a rel="nofollow" href="/ai/1342" title="HeyBoss" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        </section><section id="pricing"><h2>Pricing</h2>
          <p>...</p>
        </section><section id="contact"><h2>Contact Us</h2>
          <p>...</p>
        </section></main>
</div>
  );
}

export default Layout;

⚠️ 注意事项：

ID 唯一性：确保每个 id 在整个文档中唯一（React 中尤其注意动态生成时避免重复）；
SSR 安全性：是纯 HTML 行为，无需 JavaScript，完全兼容 SSR 和搜索引擎；
无障碍友好：天然支持键盘导航（Tab → Enter）和屏幕阅读器；
样式控制：可通过 CSS 自定义滚动行为（如启用平滑滚动）：

/* 全局启用平滑滚动（推荐） */
html {
  scroll-behavior: smooth;
}

? 进阶：需要程序化滚动？用 useEffect + scrollIntoView
若需动态触发（例如点击按钮后执行复杂逻辑再滚动），必须将 DOM 操作延迟至客户端挂载后：

import { useEffect, useRef } from 'react';

function ScrollButton({ targetId }: { targetId: string }) {
  const buttonRef = useRef<htmlanchorelement>(null);

  useEffect(() => {
    const handleClick = () => {
      const el = document.getElementById(targetId);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    const btn = buttonRef.current;
    if (btn) {
      btn.addEventListener('click', handleClick);
      return () => btn.removeEventListener('click', handleClick);
    }
  }, [targetId]);

  return (
    <button ref="{buttonRef}" type="button">
      Scroll to {targetId}
    </button>
  );
}

// 使用方式
<scrollbutton targetid="pricing"></scrollbutton></htmlanchorelement>

? 更优实践建议：