在页面顶部打开 <Link>

Question

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

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

Answer 1

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

向下滚动到它说的地方：对于 react-router v4

P.S。确保在 .babelrc 中配置了 object-rest-spread。这是一个 link：

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

Answer 2

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

根据您的情况，在“/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 组件将处理导航到新路径，一旦安装新组件，它将自动滚动到顶部。

Answer 3

回到我所做的是，当我的 BrowserRouter 更新中的组件时，我使用 window 道具将其发送回顶部，如下所示：

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(){...} ！

希望对您有所帮助！

Answer 4

我知道我的回答可能与之前的相似，但我只是想帮助那些正在使用 React Hooks 并且可能遇到的人这个question/answers...

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

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

Answer 5

v6：如果你不想使用副作用，你可以这样做

// ScrollLink.ts

import React from 'react';
import {Link, LinkProps} from "react-router-dom";

const ScrollLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
  return <Link {...props} ref={ref} onClick={() => window.scrollTo(0, 0)}/>
});

export default ScrollLink;

然后使用ScrollLink点击

滚动到任何你想滚动的地方

在页面顶部打开 <Link>

Open <Link> at top of page

react-router-v4