在滚动 reactjs 中更改路线

Posted 2023-02-21

【中文标题】在滚动 reactjs 中更改路线

【英文标题】：change route in scroll reactjs

【发布时间】：2017-05-26 22:43:01

【问题描述】：

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

希望有人指导

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>
    );
  

【问题讨论】：

呃什么？你是说当你滚动鼠标时你想让它改变路线？

是的，这可能吗？

@FERNANDOORTIZ，你做到了吗？如果您提供有关如何实现此目的的代码 sn-p，那就太好了。

您好，您能否详细说明或举例说明您为实现此功能所做的工作？

【参考方案1】：

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

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

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

Programmatically navigate using react router

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

【参考方案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")
);