為什么反應滾動不可點擊

Question

我正在使用 Link 導航到新頁面，現在我制作了一個包含所有組件的頁面，但點擊后它沒有做任何事情。

import React, { useState } from 'react'
import cn from 'classnames'
// import Link from 'next/link'
import { Link } from "react-scroll"

import Logo from '../Logo/Logo'

import styles from './Layout.module.scss'

interface ILayoutProps {
    children: React.ReactNode
}

export default function Layout({ children }: ILayoutProps) {
const [activeTab, setActiveTab] = useState('Home')
const navigation = ['#Home', '#About', '#Portfolio', '#Contact']

console.log(activeTab);

return (
    <div>
        <nav className={styles.navContainer}>
            <Link to={'/#Home'}>
                <Logo />
            </Link>

            <ul className={styles.navItems}>
                {navigation.map((nav, index) => {
                    return (
                        <li key={index}>
                            <Link
                                to={`/${nav === '#Home' ? '/' : nav}`}
                                className={cn(styles.linkItem, {
                                    [styles.activeTab]: activeTab === nav
                                })}
                                onClick={() => {
                                    setActiveTab(nav)
                                    console.log(nav)
                                }}
                                spy={true}
                                smooth={true}
                                offset={50}
                                duration={500}
                            >
                                {nav.slice(1)}
                            </Link>
                        </li>
                    )
                })}
            </ul>

            <a className={styles.button} href='assets/Stas_Gavrilov_resume.txt' download>Resume</a>
        </nav>

        <main>{children}</main>
    </div>
)

}

我跟進了有關 react-scroll 的文檔，但它並沒有幫助解決我的問題:(

它說它不能定位 section 元素：

react_devtools_backend.js:4012 target Element not found

Answer 1

您需要刪除 Link 組件中 to 屬性上的/ ，因為您要滾動to的元素的id不是 id /#Home而是#Home 。

<Link
  to={`${nav === "#Home" ? "/" : nav}`} // here
  ...
>

代替

<Link
  to={`/${nav === "#Home" ? "/" : nav}`}
  ...
>

請注意， id需要匹配，因此您要滾動到的元素必須具有確切的 id。

由於您的 ID 列表是

const navigation = ["#Home", "#About", "#Portfolio", "#Contact"];

元素的id需要包含#

<>
  <section id="#Home">Home</section>
  <section id="#About">About</section>
  <section id="#Portfolio">Portfolio</section>
  <section id="#Contact">Contact</section>
</>