リアクトでリダイレクトした後、元の位置に戻りたい場合はどうすればいいですか?
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>
);
}
履歴を閲覧できず、戻ることができない場合、状況に応じて対応することができます。