구로공돌이

import React from 'react';

class DetailPage extends React.Component {
  componentDidMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      if (action === 'POP') {
        // 뒤로가기 또는 앞으로가기 등 브라우저 조작 감지
        this.backToList();
      }
    });
  }

  componentWillUnmount() {
    if (this.unlisten) {
      this.unlisten();
    }
  }

  backToList = () => {
    console.log('뒤로가기 감지됨 - 목록 처리');
    // 목록 초기화 또는 상태 복원 등 수행
  };

  render() {
    return <div>상세 페이지입니다</div>;
  }
}

export default withRouter(DetailPage);

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

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

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (action === 'POP') {
        // 뒤로가기 등 pop 이벤트 감지
        backToList();
      }
    });

    return () => {
      unlisten(); // 컴포넌트 언마운트 시 cleanup
    };
  }, []);

  const backToList = () => {
    console.log('뒤로가기 시 호출됨!');
    // 필요한 작업 수행
  };

  return (
    <div>
      <h1>Page B</h1>
    </div>
  );
};