为什么NavLink将我重定向到React中组件的末尾部分？
为什么NavLink将我重定向到React中组件的末尾部分？
提问于 2020-12-08 18:37:00
我一直在一个基于ReactJS的网站上工作，所以我使用NavLinks重定向到其他组件，而且它正在工作，但问题是，如果我有一个联系人页面，并且我使用的是<NavLink to="/contact"> Contact Us </NavLink>，我已经建立了一条路径，当我单击该链接时，将呈现/contact的联系人组件，它将带我到该组件，但它将显示页面的末尾，例如，如果我在该联系人组件上有三个部分，所以当我单击该联系页面的最后一部分时，将带我到最后一部分。最后一节，但我希望它显示页面的顶部，该组件的第一部分的顶部。我怎样才能做到这一点？请帮助我在其他地方找不到答案。另外，我想补充的是，我在导航栏中使用的NavLinks非常好，但是所有其他人都给出了我刚才提到的问题，它们都是完全相同的，我无法解决问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-08 19:21:52
我假设您的NavLink引用是指向React Router's NavLink的。
本质上，您的React应用程序并不是在加载新的web文档(HTTP请求)的意义上导航。相反，您正在交换现有页面的部分内容。这意味着许多状态(包括在您的问题中的滚动位置)被保留。
因此，您希望在任何时候“导航”时“滚动顶部”。这可以通过在联系人页面组件中添加以下钩子来实现：
// Scroll to the top of this page when mounted
useEffect(() => {
window.scrollTo(0, 0);
}, []);注意:使用<Route path='/contact' render={() => <ContactPage />} />不会导致组件重装，并且需要另一种解决方案。
要实现这个“滚动顶部”，只要您在应用程序中全局“导航”，请考虑在位置更改时使用以下钩子“滚动顶部”：
const location = useLocation(); // import { useLocation } from 'react-router-dom';
useEffect(() => {
// Scroll top when location changes
window.scrollTo(0, 0);
}, [location]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65204851
复制相关文章
相似问题
腾讯云开发者
