Next.js跨组件滚动功能报错及模块导入问题求助

一、修复Navbar中的语法错误 #

报错源于window.scrollTo的参数格式错误，正确写法需将参数包裹为对象字面量：

修改Navbar.js中的scrollToSection函数：

const scrollToSection = (elementRef) =>{
  window.scrollTo({
    top: elementRef.current.offsetTop,
    behavior: 'smooth'
  })
}

但此函数无法解决跨页面滚动问题，需换用更合适的实现方式。

二、跨页面滚动到指定区块的正确方案 #

由于Navbar与Home页面属于不同渲染上下文，直接通过组件ref无法跨页面引用元素，推荐采用路由锚点+页面加载后平滑滚动的方式：

步骤1：修改Navbar的Services链接 #

用Next.js的Link组件直接链接到Home页面的锚点ID，替代原错误的li标签写法：

<Link legacyBehavior href="/#sectionid">
  <a>
    <li>Services</li>
  </a>
</Link>

步骤2：优化Home页面的滚动逻辑 #

在index.js中添加页面加载监听，当URL包含锚点时平滑滚动到对应区块：

import Image from 'next/image'
import Head from 'next/head'
import Link from 'next/link'
import { useRef, useEffect } from 'react'
import Servies from '../pages/servies'

export default function Home() {
  const servicesRef = useRef();

  // 页面加载时检测锚点并滚动
  useEffect(() => {
    const hash = window.location.hash;
    if (hash === '#sectionid' && servicesRef.current) {
      servicesRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  return (
    <div>
      <Head>
        <title>HelpDesk.com - we're here to serve you </title>
        <meta name="description" content="HelpDesk.com - we're here to serve you" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <img src="/home.jpg" alt="" />
      </div>
      <section ref={servicesRef} className='scrollService' id='sectionid' >
        <Servies />
      </section>
      <br />
    </div>
  )
}

步骤3：清理Navbar冗余代码 #

删除无用的ref、scrollToSection函数及错误标签，最终Navbar.js代码：

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { AiOutlineSearch } from 'react-icons/ai';

const Navbar = () => {
  return (
    <>
    <div className='flex flex-col md:flex-row md:justify-start justify-center items-center py-1 drop-shadow-xl bg-slate-100'>
    <div className='logo mx-9 cursor-pointer'>
      <Image width={70} height={70} src="/navhome.png" alt=" " />
    </div>
    <div className="nav">
        <ul className='flex items-center space-x-6 font-bold md:text-md'>
          <Link legacyBehavior href="/">
            <a>
              <li>Home</li>
            </a>
          </Link>
          <Link legacyBehavior href="/about">
            <a>
              <li>About</li>
            </a>
          </Link>
          <Link legacyBehavior href="/#sectionid">
            <a>
              <li>Services</li>
            </a>
          </Link>
          <Link legacyBehavior href="/contact">
            <a>
              <li>Contact</li>
            </a>
          </Link> 
        </ul>
      </div>
      <div className="search absolute right-0 top-6 mx-5">
       <AiOutlineSearch className='text-xl  md:text-3xl'/>
      </div>
    </div> 
    </> 
  )
}

export default Navbar;

原方案失效原因 #

1. 语法错误：window.scrollTo未使用对象字面量包裹参数，导致解析报错；
2. 跨页面ref限制：组件内部的ref仅能引用自身DOM元素，无法跨页面访问其他组件的元素，因为两者属于独立的渲染上下文。

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