在React中,我們可以使用react-router-dom
庫來進行頁面跳轉。要返回到原來的位置,我們可以使用history
對象的goBack
方法。
首先,確保你的組件包裹在<Router>
組件中,以便能夠使用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>
);
}
這樣,在沒有瀏覽歷史記錄或者無法返回時,我們可以根據實際情況進行處理。