路由后滚动到视图中

Question

在路由后如何滚动进入视图

我们正在使用react-router。我要实现的是在反应到该页面后在其中一个组件上滚动查看。

Answer 1

以下是使用react-router-dom和refs的快速示例。您没有提供任何代码供我们查看，因此请考虑将其作为模板。 ：）

这里还有一个沙箱供您参考：https://codesandbox.io/s/adoring-surf-h55ci

因此，假设您的路线设置如下：

路线

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/example" component={Example} />
      </div>
    </BrowserRouter>
  );
}

因此用户开始在家"/"

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

const Home = () => {
  return <Link to="/example">Go To Example</Link>;
};

export default Home;

他们点击link，将他们带到/example路线，呈现示例

import React from "react";
import Section from "./Section";

class Example extends React.Component {
  componentDidMount() {
    if (this.mySection.current) {
      this.mySection.current.scrollIntoView({
        behavior: "smooth",
        nearest: "block"
      });
    }
  }

  mySection = React.createRef();

  render() {
    return (
      <div>
        <div style={{ background: "orange", height: "750px" }}>
          This is an example, below is my component.
        </div>
        <div ref={this.mySection}>
          <Section />
        </div>
      </div>
    );
  }
}

export default Example;

示例分为两部分，纯文本格式的div和Section组件。如您所见，我们将Section组件包装在div中，并为其提供了ref道具。 ref使我们可以与该wrapper-div进行通信。在componentDidMount()中，我们只需滚动到该div。

Answer 2

滚动到组件的一种方法是在要滚动到的组件上放置一个引用： https://reactjs.org/docs/refs-and-the-dom.html

一旦将引用放置到组件上，就可以滚动到父组件的componentDidMount()中的引用，如下所示：

window.scrollTo(0, this.myRef.current.offsetTop)

您可能需要在这里稍加防御，并执行以下操作：

this.myRef && window.scrollTo(0, this.myRef.current.this.myRef)

这样，当访问路线时，组件将滚动到其offsetTop