为啥我的 react-router 链接会将我带到页面中间？
Posted
技术标签:
【中文标题】为啥我的 react-router 链接会将我带到页面中间？【英文标题】：Why does my react-router link bring me to the middle of a page?为什么我的 react-router 链接会将我带到页面中间？ 【发布时间】：2020-02-14 08:02:12 【问题描述】：我的网站上有很多链接，但只有一个可以这样做。
它没有通过导航栏将我带到顶部，而是转到内容的中间。知道为什么会这样吗？
这是一个有一个.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>
【问题讨论】：
【参考方案1】：react-router 在 URL 更改时呈现一个新组件，而不是硬刷新页面。这有一个令人讨厌的副作用，它会记住您当前的滚动位置，并且在页面更改时不会自动滚动回页面顶部。
我猜你的问题可能是这里的问题。如果是，那么使用简单的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'),
);
当路径改变时，您的应用现在应该会自动重置它的滚动位置。
【讨论】：
成功了！谢谢你让我注意到这个人。感谢您的宝贵时间。 没问题，很高兴能帮上忙。【参考方案2】：您可以通过每次导航时自动滚动到页面顶部来解决此问题，但这实际上并不能解决根本问题。
问题
问题是你最外层的 div 是滚动的元素，当你导航时，你只渲染你已经滚动的 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。这会导致您始终从页面顶部开始。
【讨论】：
【参考方案3】：对于 react-router-dom v6，我发现本页描述的解决方案：React Router Dom: Scroll To Top on Route Change 效果最好。
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于为啥我的 react-router 链接会将我带到页面中间？的主要内容，如果未能解决你的问题，请参考以下文章
通过 React-Router v4 <Link /> 传递值