路由更改时如何让页面滚动到顶部？

假设我们点击 About Us 按钮，我们被定向到不同的页面，但它没有从顶部加载。我们必须自己向上滚动才能从头看到内容。我们的新页面从我们的 About Us 按钮（上一页）所在的高度加载。

发生这种情况是因为react-router-dom只知道更改路由。它不能从不同的位置加载页面。所以，当我们改变路由时，我们必须制作一个不同的功能组件来从顶部加载我们的页面。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useEffect React hooks 的基础知识。
• react-router-dom的基础知识。

基本设置：您将使用create-react-app命令启动一个新项目，如下所示。

npx create-react-app react-router-scroll

现在通过在终端中输入给定的命令转到您的react-router-scroll文件夹。

cd react-router-scroll

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项。

npm install react-router-dom
npm install --save styled-components

现在在src文件夹中创建components文件夹，然后转到 components 文件夹并创建四个文件Home.js、About.js、Styling.js、GoToTop.js 。

项目结构：项目中的文件结构将如下所示。

示例：在此示例中，我们将设计一个从顶部加载我们的路由器页面的功能组件，为此我们需要操作 App.js 文件和其他创建的组件文件。

Home.js

import React from 'react'
import GoToTop from './GoToTop'
import { Header, Button, Content, RouterLink } from "./Styling"; 
const Home = () => {
    return (
        

        
GeeksForGeeks Homepage
 
        
        
        About Us
        
        
        
        
    )
}
  
export default Home

关于.js

import React from 'react'
import GoToTop from './GoToTop';
import { Header, Button, Content, RouterLink } from "./Styling"; 
const About = () => {
    return (
        

        
GeeksForGeeks About Us
 
        
        
        Return to Homepage
        
        
        
        
    )
}
  
export default About

造型.js

import { Link } from 'react-router-dom';
import styled from 'styled-components'; 
    
export const Header = styled.h1` 
   margin: 0; 
   padding: 0; 
   text-align: center; 
   color: green; 
`; 
  
export const Content = styled.div`
   overflowY: scroll; 
   height: 700px;
`;
  
export const RouterLink = styled(Link)`
   cursor: pointer; 
   transition: all 0.2s ease-in-out; 
   text-decoration: none; 
`;
  
export const Button = styled.button` 
  padding: 20px; 
  font-size: 20px; 
  position: relative; 
  left: 42%; 
  margin: 20px; 
  cursor: pointer;
`; 

GoToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
  
export default function GoToTop() {
  const routePath = useLocation();
  const onTop = () => {
    window.scrollTo(0, 0);
  }
  useEffect(() => {
    onTop()
  }, [routePath]);
  
  return null;
}

说明：我们通过名称routePath初始化一个变量，并将当前 URL 的值存储在其中，该值通过useLocation()钩子返回。

现在创建了一个onTop函数，该函数在调用时从顶部加载网页。我们将此函数作为第一个参数（作为回调函数）和我们的变量 routePath 作为第二个参数（作为依赖项）传递给我们的 使用效果挂钩。这意味着我们的函数onTop 只有在依赖 routePath 在渲染之间发生变化时才会执行。

当我们点击 About Us 按钮时， routePath 的值会发生变化（因为我们要访问一个新的 URL），并且 onTop函数会被触发，它会从顶部加载我们的页面。

应用程序.js

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
  return (
     
      
        
         
      
     
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。我们可以观察到新的路由页面正在从顶部加载，如下所示。