React Router 中 navigate 后瀏覽器返回按鈕不起作用的問題記錄

在使用 React Router（v6）開發項目時，我遇到了一個讓人困惑的問題：

當我從 /article 頁面使用 navigate("/article/next") 進行跳轉后，點擊瀏覽器的“返回”按鈕，并沒有返回 /article，而是直接跳回了更早的頁面。

這看起來像是瀏覽器“忘記”了這次跳轉，讓我以為是路由配置出錯，但實際上并不是。

---

🧪 初步排查

我首先檢查了這些常見問題：

• 是否誤用了 navigate("/article/next", { replace: true })？
• 是否子路由沒有配置好 <Outlet />？
• 是否用了不規范的嵌套路由寫法？

但這些都不是問題所在，我的路由寫法很規范，代碼如下：

const navigate = useNavigate();
navigate("/article/next");

---

🔍 真正原因：瀏覽器未記錄“非交互跳轉”

問題的根源在于：

如果你在沒有任何用戶交互的情況下調用 navigate()，瀏覽器可能不會將當前頁面加入歷史記錄棧，而是將這次跳轉視為“初始化跳轉”并直接替代當前頁面。

也就是說，只有在“用戶明確做了某種交互”后觸發的跳轉，才會被瀏覽器視為一次真正的導航行為。

---

? 解決方案：等用戶點擊后再跳轉

要確保跳轉能被瀏覽器歷史記錄下來，最可靠的方式是：

等待用戶進行一次點擊操作之后，再調用 navigate()。

例如：

const navigate = useNavigate();useEffect(() => {const handleClick = () => {navigate("/article/next");};document.addEventListener("click", handleClick, { once: true });return () => {document.removeEventListener("click", handleClick);};
}, []);

上面這段代碼的含義是：用戶在任意位置點擊一次后，就執行跳轉，這樣瀏覽器就會記錄這次跳轉。

你也可以在指定的按鈕中觸發跳轉：

<button onClick={() => navigate("/article/next")}>下一頁</button>

這種方式是最可靠的，瀏覽器一定會保留跳轉歷史。

---

🧾 總結

跳轉方式	是否加入歷史記錄	原因說明
頁面加載后立即自動跳轉（如 useEffect）	? 否	瀏覽器視為初始化階段，優化掉了
用戶點擊后跳轉	? 是	有明確交互，視為有效導航
navigate(..., { replace: true })	? 否	顯式替代當前歷史，不保留

---

這次調試經歷讓我意識到：

React Router 的跳轉沒錯，但瀏覽器對“自動跳轉”的處理確實有坑，跳轉行為和“是否有用戶交互”關系很大。

希望這篇記錄能幫到遇到類似問題的你！

---

如有其他 React Router 使用疑問，也歡迎繼續交流 😊