为什么 NavLink 将我重定向到 React 中组件的末尾部分

Question

我一直在开发一个基于 ReactJS 的网站，所以我使用 NavLinks 重定向到其他组件，它正在工作，但问题是它把我带到了组件的最后，就像我有一个联系页面并且我正在使用并且<NavLink to="/contact"> Contact Us </NavLink>我已设置一条路线，该路线将为/contact 呈现联系人组件 当我单击此链接时，它将带我到该组件，但它会显示页面的末尾，比如说，如果我在该联系人组件上有三个部分，那么当我单击NavLink 它将带我到最后一部分的最后一部分，但我希望它显示页面顶部该组件第一部分的顶部。我怎样才能做到这一点？请帮助我在其他地方找不到这个问题的答案。另外我想补充一点，我在导航栏中使用的 NavLink 工作得很好，但所有其他人都遇到了我刚才提到的问题，而且所有这些都完全相同，我无法弄清楚问题。

Answer 1

我假设您NavLink参考的是React Router 的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]);