路由器问题。当我在react-router版本6中更改任何路由器时，页面位置保持最后页面位置

Question

我使用了react-router版本6。一切正常。但有一个问题是，当我更改任何路线时，假设这是 2 条路线，另一次联系。现在我在关于页面的中间。现在，当我单击“联系路由页面”时，路由器已更改，但问题是网页仍然保留在页面中间。一般来说，当我们点击任何链接更改路线页面位置时，都会自动从顶部开始。然后我们必须滚动。但是react-router版本6有这个问题。页面不会从顶部位置开始。页面位置保留最后一页位置。

我怎么解决这个问题？请帮我。如果您不明白我的问题，请在评论部分告诉我。

路由器文件代码

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "../Components/Navbar/Navbar";

const NavbarRouter = () => {
    return (
        <Routes>
            <Route path="/" element={<Navbar />}>
                <Route index element={<Home />} />
                <Route path="about" element={<About />} />
                <Route path="contact" element={<Contact />} />
            </Route>
        </Routes>
    );
};

导航栏代码

import React from 'react';
import {Outlet,Link} from "react-router-dom"


const Navbar = () => {
    return (
        <div>
            <nav className="navbar position-fixed navbar-expand-lg navbar-light bg-light">
                <div className="container-fluid">
                    <a className="navbar-brand" href="#">
                        Navbar
                    </a>
                    <button
                        className="navbar-toggler">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav">
                            <li className="nav-item">
                                <Link className="nav-link" to="/">Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/about">About</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/contact">Contact</Link>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
                                    Disabled
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <Outlet />
        </div>
    );
};

export default Navbar;

Answer 1

在NavbarRouter包装器组件中，使用useLocation和useEffect钩子“监听”路由更改并将窗口滚动回顶部。

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const NavbarRouter = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  
  return (
    <Routes>
      <Route path="/" element={<Navbar />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
};

如果您需要配置/自定义视图如何滚动回顶部的行为，请使用options参数版本。将该behavior选项设置为auto（默认）或 之一smooth。auto是默认值，让浏览器决定是使用平滑滚动还是即时滚动。

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'auto',
});

window.scrollTo