我正在尝试使导航栏导航到另一个页面并向下滚动到此页面上的某个 id
这是我的 protofolio 的 navBar 组件,它有 3 个链接 Projects
应该去Home
然后向下滚动到 projects
项目部分中的 id
import React, { Component } from "react";
import logo from "../../images/logo.png";
import { Link } from "react-router-dom";
import Scroll from "react-scroll";
import "./NavBar.css";
const ScrollLink = Scroll.Link;
class NavBar extends Component {
render() {
return (
<div className="NavBar">
<Link to="/" className="logo-container">
<img className="logo" src={logo} alt="Mahboub logo"></img>
</Link>
<div className="Nav-links">
<Link to="/">Home</Link>
<ScrollLink
className="navy"
smooth={true}
duration={500}
to="projects"
>
projects
</ScrollLink>
<Link to="/">Contacts</Link>
</div>
</div>
);
}
}
export default NavBar;
这是主页中项目部分的项目组件
function Projects() {
return (
<div className="Home-Projects">
<Element id="projects">
<h1>Projects</h1>
</Element>
<div className="Projects-container">
<ProjectElement />
</div>
</div>
);
}
最佳答案
如果“持续时间”参数对您来说不是很重要,并且您对 Hooks 没有任何问题,我想建议如下解决方案。
<Link to="/#projects">projects</Link>
function Projects() {
const location = useLocation()
...
当您从第 1 页点击链接时,您将获得表单的新位置对象
location = {
...
pathname:"/",
...
hash: "#projects"
}
useEffect
Hook useLocation
像这样:
useEffect(()=> {
if (location.hash) {
let elem = document.getElementById(location.hash.slice(1))
if (elem) {
elem.scrollIntoView({behavior: "smooth"})
}
} else {
window.scrollTo({top:0,left:0, behavior: "smooth"})
}
}, [location,])
就是这样。如您所见,如果您的网址中没有散列,您的页面将滚动到顶部。使用
[locaton,]
如useEffect
当您的页面组件不是因为位置更改而重新呈现时,依赖项会阻止表单滚动。
关于javascript - 如何使用 react 路由器和 react 滚动在特定ID上平滑滚动导航到另一个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61779236/