[英]why does react-scroll not clickable
I was using Link to navigate to new page, now I made one page of all components and it's not doing anything on click.我正在使用 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>
)
} }
I follow up with the docs on react-scroll but it did not helped to solve my issue:(我跟进了有关 react-scroll 的文档,但它并没有帮助解决我的问题:(
It's saying it can't target the section element:它说它不能定位 section 元素:
react_devtools_backend.js:4012 target Element not found
You need to remove the /
on the to
prop in the Link component since the id
of the element you want to scroll to has not the id /#Home but #Home .您需要删除 Link 组件中 to 属性上的
/
,因为您要滚动to
的元素的id
不是 id /#Home而是#Home 。
<Link
to={`${nav === "#Home" ? "/" : nav}`} // here
...
>
Instead of代替
<Link
to={`/${nav === "#Home" ? "/" : nav}`}
...
>
Note that the id
needs to match so the elements you want to scroll to must have the exact id.请注意,
id
需要匹配,因此您要滚动到的元素必须具有确切的 id。
Since your list of ids is由于您的 ID 列表是
const navigation = ["#Home", "#About", "#Portfolio", "#Contact"];
The id
of the elements need to contain the #元素的
id
需要包含#
<>
<section id="#Home">Home</section>
<section id="#About">About</section>
<section id="#Portfolio">Portfolio</section>
<section id="#Contact">Contact</section>
</>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.