How Do I Modify The URL Without Reloading The Page?

You can use the history.pushState() method to modify the URL without refreshing the page. Here’s an example:

history.pushState({}, null, '/new-url');

This will change the URL to /new-url without triggering a page reload.

You can also update the URL based on user actions or events, like clicking a button. Here’s an example of changing the URL when a button is clicked:

<button>Change URL</button>

  const changeUrlButton = document.getElementById('change-url-btn');

  changeUrlButton.addEventListener('click', () => {
    history.pushState({}, null, '/new-url');

When the button is clicked, the URL will be updated to /new-url.

About the Author Rex

I'm a passionate tech blogger with an insatiable love for programming! From my early days tinkering with code, I've delved into web dev, mobile apps, and AI. Sharing insights and tutorials with the world is my joy, connecting me to a global community of like-minded tech enthusiasts. Python holds a special place in my heart, but I embrace all challenges. Constantly learning, I attend tech conferences, contribute to open-source projects, and engage in code review sessions. My ultimate goal is to inspire the next generation of developers and contribute positively to the ever-evolving tech landscape. Let's code together!