Reactにおいてユーザーが戻るボタンをクリックした際にページを再レンダリングする方法

useHistoryフックとuseEffectフックを使用する方法: React RouterのuseHistoryフックとuseEffectフックを組み合わせることで、ユーザーが戻るボタンをクリックしたときにページを再レンダリングすることができます。

import { useHistory } from 'react-router-dom';
import { useEffect } from 'react';
function MyComponent() {
  const history = useHistory();
  useEffect(() => {
    const unlisten = history.listen(() => {
      // ユーザーが戻るボタンをクリックしたときに実行される処理をここに記述
      // ページの再レンダリングなどの処理を行う
    });
    return () => {
      unlisten(); // コンポーネントがアンマウントされるときにリスナーを解除
    };
  }, [history]);
  return <div>My Component</div>;
}

この例では、useHistoryフックを使ってhistoryオブジェクトを取得し、そのオブジェクトのlistenメソッドを使ってユーザーの遷移を監視しています。そして、useEffectフックを使ってコンポーネントがマウントされたときにリスナーを登録し、アンマウントされるときにリスナーを解除しています。

React RouterのwithRouterを使用する方法: React RouterのwithRouterを使うと、コンポーネントがルーティングの変更を監視し、ユーザーが戻るボタンをクリックしたときにページを再レンダリングすることができます。

import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
  componentDidMount() {
    this.unlisten = this.props.history.listen(() => {
      // ユーザーが戻るボタンをクリックしたときに実行される処理をここに記述
      // ページの再レンダリングなどの処理を行う
    });
  }
  componentWillUnmount() {
    this.unlisten(); // コンポーネントがアンマウントされるときにリスナーを解除
  }
  render() {
    return <div>My Component</div>;
  }
}
export default withRouter(MyComponent);

この例では、withRouterを使ってコンポーネントをラップし、componentDidMountメソッドでリスナーを登録し、componentWillUnmountメソッドでリスナーを解除しています。

これらの方法を使うと、ユーザーが戻るボタンをクリックした際にページを再レンダリングすることができます。適切な方法を選んで、自分のプロジェクトに合わせて実装してみてください。