勇哥

勇哥开发之路

I build things on web.
HomeArchives

How to dynamically change the browser address bar URL without re-rendering the page

#Next.js#前端#react#JavaScript81
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The document discusses the implementation of dynamic URL changes in an AI chat application using Next.js. It highlights the common practice of generating a unique ID for each chat session and updating the browser's address bar without refreshing the page. The author initially attempted to use Next.js's `router.push()` but found it ineffective due to outdated information. The solution involves using the History API's `history.pushState()` and `history.replaceState()` methods to manipulate the browser's history without reloading the page. Key differences between these methods are explained: `pushState()` adds a new entry to the history stack, while `replaceState()` modifies the current entry. Examples of both methods are provided, along with links to relevant resources. In summary, `pushState()` is for adding new history entries, and `replaceState()` is for replacing the current entry.

Introduction#

Recently, Yong Ge has been working on an AI dialogue application 🤖 and has experienced quite a few AI dialogue applications.

In the new dialogue scenario, after the user submits the first question, most AI dialogue applications handle it by: the front end generates a unique ID, and the browser's address bar is immediately replaced with a URL used to identify that dialogue, similar to /chat/e797acdb-69a8-4aad-a1b3-91b6b9bcd839. The benefits of this approach are obvious: unique resource location, the generated result can be shared and revisited through this address, and it prepares for multi-turn dialogues.

Problem#

Because Yong Ge chose the Next.js based ai-chatbot during the technology selection process, the first thing that came to mind was to use router.push() from Next.js to implement it. However, in practice, this approach does not work; much of the information online is outdated, and the page still refreshes.

Picking up the Next.js hammer, every problem seems like a nail to be hammered, learning the art of dragon-slaying while ignoring the power of basic chopping and prodding.

Solution#

Many problems ultimately return to simplicity, using the most basic ingredients. In fact, to achieve dynamic changes in the browser's address bar URL without re-rendering the page, you only need to use the history.pushState() or history.replaceState() from the basic Web API's History API:

...
const newChatUrl = '/chat/' + uuid
window.history.pushState(window.history.state, '', newChatUrl);
...

Basic Consolidation#

Theoretical content can be quite dull; if it solves your problem, you can close the page now 😎

window.history.replaceState and window.history.pushState are both methods for manipulating the browser's history stack, but there are some key differences between them:

  • window.history.pushState:

    • Adds a new state to the browser's history stack.
    • The browser's address bar will display the new URL, but it will not trigger a page reload.
    • Adds a new history entry, allowing users to return to the previous page using the back button.

  • window.history.replaceState:

    • Replaces the current history entry instead of adding a new one.
    • The browser's address bar will display the new URL, but it will not trigger a page reload.
    • Does not add a new history entry, so clicking the back button will take the user to the history before the current page.

Example#

Using pushState#

window.history.pushState({ page: 1 }, "title 1", "/page1");

This will add a new entry in the history, allowing users to return to the previous page using the back button.

Using replaceState#

window.history.replaceState({ page: 2 }, "title 2", "/page2");

This will replace the current history entry, and clicking the back button will take the user to the history before the current page.

Summary#

  • pushState is used to add new history entries.
  • replaceState is used to replace the current history entry.

Resources mentioned in the text:

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.