[英]Router problem. Page position stay the last page position when I change any router in react-router version 6
我使用了 react-router 版本 6。一切正常。 但是有一个问题是,当我更改任何路线时,假设这些路线大约是 2 条路线,另一个联系人。 现在我在关于页面的中间。 现在,当我单击联系路由页面时,路由器已更改,但问题是网页仍停留在页面中间。 一般当我们点击任意链接更改路由页面position会自动从顶部开始。 然后我们必须滚动。 但是 react-router 版本 6 有这个问题。 该页面不会从顶部 position 开始。 页 position 停留在最后一页 position。
我怎么解决这个问题? 请帮我。 如果您不理解我的问题,请在评论部分告诉我。
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
包装器组件中,使用useLocation
和useEffect
挂钩来“监听”路由更改并将 window 滚动回顶部。
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.