引言#
最近勇哥在做一個 AI 對話應用🤖，也體驗了不少 AI 對話應用。
在新對話場景下，當用戶提交第一個問題後，大部分 AI 對話應用的處理方式是：前端生成一個唯一 ID，瀏覽器地址欄立即替換為用來標識該對話的 URL，類似 /chat/e797acdb-69a8-4aad-a1b3-91b6b9bcd839 這種。這樣做的好處顯而易見：唯一資源定位，生成的結果可以通過這個地址分享、再次訪問，也為多輪對話做好了準備。
問題#
因為勇哥在做技術選型的時候，選了基於 Next.js 的 ai-chatbot，所以第一時間想到的用 Next.js 這把的 router.push() 來實現。經實踐，這種方式行不通，網上很多信息是過時的，頁面還是會刷新。
拿起 Next.js 這把錘子，什麼問題都想當釘子去錘一下，學習了屠龍之術，卻忽視了基本的劈砍撩撥的威力。
解決辦法#
很多問題最後都要返璞歸真，用最樸素的食材。其實要想在不重新渲染頁面的情況下，實現瀏覽器地址欄 URL 動態變化，只需要用基本的 Web API 中的 History API 下的 history.pushState() 或者 history.replaceState() 即可：
...
const newChatUrl = '/chat/' + uuid
window.history.pushState(window.history.state, '', newChatUrl);
...
基礎鞏固#
理論向，較枯燥，如果解決了你的問題，可以關閉頁面啦😎
window.history.replaceState 和 window.history.pushState 都是用於操作瀏覽器的歷史記錄棧的方法，但它們之間存在一些關鍵的區別：
-
window.history.pushState:- 向瀏覽器的歷史記錄棧添加一個新的狀態。
- 瀏覽器的地址欄會顯示新的 URL，但不會觸發頁面的重新加載。
- 增加了一個新的歷史記錄條目，用戶可以通過後退按鈕返回到前一個頁面。
-
window.history.replaceState:- 替換當前的歷史記錄條目，而不是添加一個新的條目。
- 瀏覽器的地址欄會顯示新的 URL，但不會觸發頁面的重新加載。
- 不增加新的歷史記錄條目，用戶點擊後退按鈕會跳轉到當前頁面之前的歷史記錄。
示例#
使用 pushState#
window.history.pushState({ page: 1 }, "title 1", "/page1");
這會在歷史記錄中添加一個新的條目，用戶可以通過後退按鈕返回到之前的頁面。
使用 replaceState#
window.history.replaceState({ page: 2 }, "title 2", "/page2");
這會替換當前的歷史記錄條目，用戶點擊後退按鈕會跳轉到當前頁面之前的歷史記錄。
總結#
pushState用於添加新的歷史記錄條目。replaceState用於替換當前的歷史記錄條目。
文中提到的資源：
- ai-chatbot：https://github.com/vercel/ai-chatbot
- history.pushState：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
- history.replaceState：https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState