gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 01:55:38 24 4
gpt4 key购买 nike

我用过react-router version 6,一切正常。但是有一个问题,当我改变任何路线时,假设这些是 2 条路线,另一个联系人。现在我在关于页面的中间。现在,当我单击联系路由页面时,路由器已更改,但问题是网页仍然位于页面中间。一般当我们点击任意链接更改路由页面位置时,会自动从顶部开始。然后我们必须滚动。但是 react-router version 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;

最佳答案

NavbarRouter 包装器组件中,使用 useLocationuseEffect Hook 来“监听”路由更改并将窗口滚动回顶部.

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>
);
};

如果您需要配置/自定义 View 如何滚动回顶部的行为,请使用 options 参数版本。将 behavior 选项设置为 auto(default)、smoothinstant 之一>。 auto 是默认设置,让浏览器决定是使用平滑滚动还是即时滚动。如果您不想看到滚动动画,请指定 instant 选项。

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

window.scrollTo

关于javascript - 路由器问题。当我在 react-router 版本 6 中更改任何路由器时,页面位置保持在最后一页位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70180948/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com