为什么我的 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>

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案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。