Question

我有一个问题，但我甚至不知道如何解决它，如果我向下滚动，请向我显示以下路线并向上滚动以显示以前的路线

我希望有些指南

class Routes extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/' component={HomeLayout}>
          <IndexRoute component={HomeComponent} />
        </Route>
        <Route path='aps' component={AppServiceLayout}>
          <IndexRoute  />
        </Route>
        <Route path='portfolio' component={portfolioLayout}>
          <IndexRoute  />
        </Route>
        <Route path='about_us' component={aboutUsLayout}>
          <IndexRoute  />
        </Route>        
        <Route path='*' component={HomeLayout}>
          <IndexRoute component={NotFoundComponent} />
        </Route>
      </Router>
    );
  }
}

Answer 1

有一个onScroll事件可以用作触发器，这里有一篇关于如何确定它们是向上还是向下滚动的帖子：

How can I determine the direction of a jQuery scroll event?

以下是关于如何以编程方式更改React Route的链接：

Programmatically navigate using react router

因此，当它们滚动时，检查它是向上还是向下，然后相应地推送下一个/上一个路线。我不知道是否有任何内置的东西只是在某条路线之前/之后立即获得路线，所以你可能只需要在某处作为参考列出它们

Answer 2

滚动结束后，您可以使用（react-router-dom useHistory）更改路径。

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter, useHistory } from "react-router-dom";

const Root = () => {
    const history = useHistory();

    function handleScroll(event) {
        var node = event.target;
        const down = node.scrollHeight - node.scrollTop === node.clientHeight;
        if (down) {
            history.push("/newPath");
        }
    }

    const paneDidMount = (node) => {
        if (node) {
            node.addEventListener("scroll", handleScroll);
        }
    };

    return (
        <div ref={paneDidMount} style={{ overflowY: "scroll", maxHeight: "300px" }}>
            <section className="section" style={{ height: `100vh` }}>
                <h1>1</h1>
            </section>
            <section className="section" style={{ height: `100vh` }}>
                <h1>2</h1>
            </section>
        </div>
    );
};

ReactDOM.render(
    <HashRouter>
        <div>
            <Root></Root>
        </div>
    </HashRouter>,
    document.getElementById("root")
);

滚动reactjs改变路线

2 个答案: