打开页面顶部的 <Link>答案

【问题标题】：Open <Link> at top of page打开页面顶部的 <Link>
【发布时间】：2018-01-16 21:52:14
【问题描述】：

我正在使用 React Router 4，当我使用 <Link> 时，新页面不会在页面顶部打开。我需要告诉<Link> 一些具体的事情吗？

<Link to="/mypage">My Page</Link>

【问题讨论】：

标签： react-router-v4

【解决方案1】：

我在answer to a similar question 中找到了一个非常可靠的答案。无论如何它对我有用，所以我想我会分享。

根据您的情况，在“/mypage”的组件中将window.scrollTo(0, 0); 添加到componentDidMount 函数。像这样的：

import ...
export default class MyPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ...
        };
    }

    componentDidMount() {
        window.scrollTo(0, 0);
    }

    render() {
        return (
            ...
        )
    }
}

Link 组件将处理导航到新路径，一旦安装了新组件，它将自动滚动到顶部。

【讨论】：

谢谢。非常简单的解决方案。只需一行代码。再次感谢

【解决方案2】：

我知道我的答案可能与以前相似，但我只是想帮助那些正在使用 React Hooks 并且可能会遇到这个问题/答案的人...

useLayoutEffect(() => {
    window.scrollTo(0, 0)
});

基本上，我的意思是，在useLayoutEffect 中添加window.scrollTo(0, 0) 就可以了。

【讨论】：

【解决方案3】：

所以我找到了一个非常酷的解决方法。基本上，您将需要创建一个仅负责滚动到顶部的包装器组件（它将包装 Route）。然后，您将需要在路由器中使用包装器而不是路由。完整的解决方案在这里： react-router scroll to top on every transition

向下滚动到显示的位置：对于 react-router v4

附：确保在 .babelrc 中配置了 object-rest-spread。这是一个链接：

https://babeljs.io/docs/plugins/transform-object-rest-spread/

【讨论】：

建议您给出答案，不要将答案重定向到另一个问题。

【解决方案4】：

回到我所做的是，当我的 BrowserRouter 更新中的组件时，我将它发送回顶部，窗口道具如下：

Root.jsx：

...
    <BrowserRouter onUpdate={() => window.scrollTo(0, 0)} >
      <Switch>
        <Route exact path={path.LOGIN} render={Login} />
        <Route exact path={path.SIGNUP} render={Signup} />
        <Route
          path={path.HOMEPAGE}
          render={() => <HomePageRouter />}
        />
      </Switch>
    </BrowserRouter>
...

然后在我的 HomePageRouter 中

class HomePageRouter extends Component {

  componentDidUpdate() {
    window.scrollTo(0, 0);
  }

  render() {
    return (
      <div className='bm-page-wrapper' >
        <NavBar
          activeItem={this.props.menu.activeItem}
          toggle={this.props.menu.toggle}
          lang={this.props.lang}
        />
        <Switch >
          <Route
            exact
            path={path.HOMEPAGE}
            render={() => <Homepage lang={this.props.lang} />}
          />
          <Route
            path={path.ABOUT}
            render={() => <About lang={this.props.lang} />}
          />
          <Route
            path={path.CONTACT}
            render={() => <Contact lang={this.props.lang} />}
          />
          <Route render={() => <NotFound lang={this.props.lang} />} />
        </Switch>
        <Footer lang={this.props.lang} />
      </div>
    );
  }
}

因此，我在 HomePageRouter 组件中的任何路径都会检测到路由更新并导致它重新渲染。我建议使用一些子路由器，这样您就不必在每个组件上添加 componentDidUpdate(){...} ！

希望对你有帮助！

【讨论】：