如何使用react和redux从不同/其他页面滚动到视图？

<div ref={scrollRef}>目标视图内容</div>

export const scrollToView = (ref) => {
  return {
    type: 'SCROLL_TO_VIEW',
    payload: ref,
  };
};

const initialState = {
  scrollRef: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SCROLL_TO_VIEW':
      return {
        ...state,
        scrollRef: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

import { connect } from 'react-redux';
import { scrollToView } from './actions';

class MyComponent extends React.Component {
  handleScrollToView = () => {
    this.props.scrollToView(this.scrollRef);
  };

  render() {
    return (
      <div>
        <button onClick={this.handleScrollToView}>滚动到目标视图</button>
        {/* 其他页面内容 */}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    scrollRef: state.scrollRef,
  };
};

const mapDispatchToProps = {
  scrollToView,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

import { useEffect } from 'react';
import { connect } from 'react-redux';

const App = (props) => {
  useEffect(() => {
    if (props.scrollRef) {
      window.scrollTo({
        top: props.scrollRef.current.offsetTop,
        behavior: 'smooth',
      });
    }
  }, [props.scrollRef]);

  return (
    <div>
      {/* 其他根组件内容 */}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    scrollRef: state.scrollRef,
  };
};

export default connect(mapStateToProps)(App);