[英]Why does my react-router link bring me to the middle of a page?
我的網站上有很多鏈接，但只有一個這樣做。
它沒有將我帶到導航欄的頂部，而是轉到內容的中間。 知道為什么會這樣嗎？
這是一個具有.map的頁面，它通過一些JSON ，它在頁面下方呈現文本的div元素......如果它重要的話。
這是一些可能相關的代碼。
路線
<Route exact path ="/reviews" component={Reviews} />
鏈接
<Link to="/reviews">
<ViewAllBtn>View All</ViewAllBtn>
</Link>
着陸頁（位於中間而不是頂部）
<MotherDiv>
<NavBar />
<Prompt>
<PromptHead>Customer Reviews</PromptHead>
<PromptBody>Heres what our loyal customers think of Heavenly Details.</PromptBody>
</Prompt>
<ReviewsDiv>
{reviews.map(review =>
<ReviewDiv key={review.name}>
<Name>{review.name}</Name>
<Body>{review.body}</Body>
</ReviewDiv >
)}
</ReviewsDiv>
<Footer />
</MotherDiv>
react-router會在 URL 更改而不是硬刷新頁面時呈現新組件。 這有一個令人討厭的副作用，它會記住您當前的滾動 position 並且在頁面更改時不會自動滾動回頁面頂部。
我猜從你的問題的聲音來看，這可能是這里的問題。 如果是這樣，那么使用簡單higher order component就很容易解決這個問題：
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
const { location } = this.props;
if (location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0);
}
}
render() {
const { children } = this.props;
return children;
}
}
export default withRouter(ScrollToTop);
像這樣將這個組件包裹在你的App周圍：
render(
<ScrollToTop>
<App />
</ScrollToTop>,
document.getElementById('app'),
);
當路線改變時，您的應用程序現在應該會自動重置它的滾動 position。
您可以通過每次導航時自動滾動到頁面頂部來解決此問題，但這實際上並不能解決根本問題。
問題是你最外層的 div 是滾動的元素，當你導航時，你只渲染你已經滾動的 div 中的元素，這就是為什么你的新頁面看起來好像你已經向下滾動了一部分（因為從技術上講你有）
這是解決此問題的一種干凈方法...
在 App.js 的主 div 上添加 overflowY 樣式作為“隱藏”
將各個頁面包裝在一個 div 中，並將 overflowY 樣式設置為“滾動”。 我通常將其作為自己的功能組件，以便輕松地將其包裹在所有其他頁面上
import React from 'react';
import './App.css'
import {
BrowserRouter as Router,
Switch,
Route,
withRouter
} from "react-router-dom";
function Page () {
return (
<div style={{overflowY: 'scroll'}}>
{props.children}
</div>
)
}
function App() {
return (
<div className="App">
<Router>
<div id="main" style={{overflowY: 'hidden'}}>
<Switch>
<Route exact path="/screen1">
<Page>
<Screen1 />
</Page>
</Route>
<Route path="/screen2">
<Page>
<Screen2 />
</Page>
</Route>
</Switch>
</div>
</Router>
</div>
);
}
這樣，每次導航到新頁面時，滾動的 div 都會被清除並替換為新的 div。 這導致您始終從頁面頂部開始。
我想您應該在添加了鏈接標簽的代碼中添加target="_top" 。
它對我有用，希望它也對你有用。
喜歡
<Link to={"/affiliate"} target="_top" className="text-decoration-none"><button className="btn btn-success text-light rounded-30 px-5 my-3"> Link Button </button></Link>
對於 react-router-dom v6，我發現此頁面上描述的解決方案： React Router Dom: Scroll To Top on Route Change效果最好。
React Router V5，本文檔幫助我解決我的頁面滾動問題，它是 position https://v5.reactrouter.com/web/guides/scroll-restoration/scroll-to-top
只需在您的 React 組件中使用以下代碼片段。
import { useLocation } from 'react-router-dom'
.
.
.
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0)
}, [pathname];
通過使用它，您將重置最后一頁的滾動位置。
制作 scrollToTop 函數並在您的鏈接標記中使用它
const scrollToTop = () => {
window.scrollTo(0, 0)
}
當用戶點擊任何鏈接時，我們的功能將使我們的頁面滾動到頂部。
<li onClick={scrollToTop} ><Link to={{pathname: "/product", state: {products}}}><i className="fa fa-search"></i></Link></li>
為什么我的 react-router 鏈接沒有將我帶到另一個頁面（React JS）？
[英]Why does my react-router Link not take me to the other page (React JS)?
React-Router - 鏈接到同一頁面而不觸發頁面unMount
[英]React-Router - Link to the same page not triggering page unMount
React-Router：為什么不呢 <Link> 組件的onClick處理程序調度我的動作？
[英]React-Router: Why won't <Link> component's onClick handler dispatch my action?
為什么選擇React-router v4 <Link/> 不起作用（更改網址但不提取內容）？
[英]Why React-router v4 <Link/> does not work (Changes url but not rendering content)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.