在滚动reactjs中更改路由

npm install react-router-dom

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { useEffect } from 'react';

const handleScroll = () => {
  // 根据滚动位置更新URL路由
  // ...
};

const App = () => {
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <Router>
      {/* 定义应用的路由规则 */}
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      {/* ... */}
    </Router>
  );
};

import { useHistory } from 'react-router-dom';

const handleScroll = () => {
  const history = useHistory();
  const scrollPosition = window.scrollY;

  // 根据滚动位置更新URL路由
  if (scrollPosition < 500) {
    history.push('/');
  } else {
    history.push('/about');
  }
};