Question

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

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

Answer 1

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

向下滚动到它所说的位置：对于react-router v4

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

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

Answer 2

我在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组件将处理导航到新路径的过程，一旦安装了新组件，它将自动滚动到顶部。

Answer 3

返回到我在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（）{...}！

希望有帮助！

Answer 4

我知道我的答案可能与以前的答案相似，但是我只想帮助使用 反应钩子 的人，可能会遇到这个问题/答案... < / p>

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

基本上，我的意思是在window.scrollTo(0, 0)内添加useEffect即可正常工作。

在页面顶部打开<link />

4 个答案: