リアクトでリダイレクトした後、元の位置に戻りたい場合はどうすればいいですか?

Reactでは、react-router-domライブラリを使用してページ遷移を行うことができます。元の位置に戻るには、historyオブジェクトのgoBackメソッドを使用することができます。

最初に、コンポーネントがコンポーネントでラップされていることを確認して、historyオブジェクトを使用できるようにします。そして、戻る必要がある場所で、goBackメソッドを以下のように使用できます:

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

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={handleClick}>返回</button>
    </div>
  );
}

上記の例では、useHistoryフックを使用してhistoryオブジェクトを取得し、ボタンをクリックしたときにgoBackメソッドを呼び出して元の位置に戻ります。

ご注意ください:過去に履歴がない場合や、履歴の起点にいる場合、goBackメソッドは効果がありません。そのため、goBackメソッドを使用する前に、履歴の長さを確認することをお勧めします。例えば、

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

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    if (history.length > 1) {
      history.goBack();
    } else {
      // 处理无法返回的情况
    }
  };

  return (
    <div>
      <button onClick={handleClick}>返回</button>
    </div>
  );
}

履歴を閲覧できず、戻ることができない場合、状況に応じて対応することができます。

bannerAds