How to Modify the URL Without Reloading the Page in JavaScript

By the end of this page, you will understand how JavaScript can update the browser URL without refreshing the page, when to use the History API versus the hash portion of the URL, and what restrictions apply when changing paths, query strings, and fragments.

The core concept behind this question is client-side URL manipulation.

Normally, when you assign a new value to window.location.href, the browser treats it as a navigation request. That means it loads a new page from the server.

However, modern browsers also provide the History API, which lets JavaScript update the URL shown in the address bar without reloading the page.

The two main methods are:

history.pushState(state, title, url)
history.replaceState(state, title, url)

These methods are useful in single-page applications, filters, tabs, dashboards, and search pages where the UI changes but a full page reload would be unnecessary.

Why this matters

Changing the URL without reloading is important because:

• users can bookmark the current app state
• the back and forward buttons can still work
• URLs can reflect selected filters, tabs, or views
• the page feels faster because it avoids full reloads

What you can change

You can update:

• the path, such as /page2
• the query string, such as ?sort=price
• the hash, such as #section3

But there is an important rule:

• you can only use the History API for URLs on the same origin

Think of the browser URL like a label on a folder.

• window.location.href = ... is like throwing away the current folder and opening a different one.
• history.pushState(...) is like changing the label on the folder while keeping the contents currently open.
• changing location.hash is like adding a sticky note to the folder label.

The page reload happens when the browser thinks you are requesting a new document. The History API avoids that by changing the address bar and browser history without making the browser load a new page.

Core syntax

history.pushState(stateObject, "", newUrl);
history.replaceState(stateObject, "", newUrl);

• pushState adds a new history entry
• replaceState updates the current history entry
• the second argument is traditionally unused in modern code, so an empty string is common

Example: change the path without reload

history.pushState({}, "", "/page2.php");

This updates the URL in the address bar to /page2.php on the current domain without reloading the page.

Example: change the query string

history.pushState({}, "", "/products?category=books");

This is useful for filters or search pages.

Example: replace instead of push

history.replaceState({}, "", "/profile?tab=settings");

Consider this code:

console.log(location.pathname);
history.pushState({}, "", "/dashboard?view=weekly#chart");
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);

Step by step

1. The first console.log(location.pathname) prints the current path.
2. history.pushState({}, "", "/dashboard?view=weekly#chart") changes the browser URL without reloading.
3. The next console.log(location.pathname) now prints /dashboard.
4. console.log(location.search) prints ?view=weekly.
5. console.log(location.hash) prints #chart.

Important detail

The JavaScript environment continues running on the same page. No new document is loaded.

Changing the URL without reloading is common in many types of applications.

Single-page applications

Frameworks like React, Vue, and Angular use this approach for client-side routing.

Example:

• /dashboard
• /dashboard/reports
• /dashboard/settings

The app changes views without a full page refresh.

Filtered product pages

An online store may update the URL when a user selects filters:

/products?category=shoes&color=black

This makes the filtered view shareable and bookmarkable.

Tabs and panels

A profile page might update the URL when the user opens a tab:

/profile?tab=security

Search interfaces

A search tool might store the current search term or sort order in the URL.

Documentation pages

A docs site may use hashes for section navigation:

/docs/api#authentication

Maps and dashboards

Applications often store zoom level, selected date range, or current panel in the URL so the state can be restored later.

In real projects, developers usually combine URL updates with application state.

Common pattern: update UI and URL together

function setView(view) {
  renderView(view);
  history.pushState({ view }, "", `/dashboard?view=${view}`);
}

This keeps the browser URL consistent with what the user sees.

Guard clause for invalid input

function setTab(tab) {
  const allowedTabs = ["profile", "security", "billing"];

  if (!allowedTabs.includes(tab)) {
    return;
  }

  history.replaceState({ tab }, "", `/account?tab=${tab}`);
}

This prevents invalid URLs from being generated.

Reading URL parameters on load

const params = new URLSearchParams(location.search);
const tab = params.() || ;
(tab);

1. Using window.location.href when you do not want navigation

Broken example:

window.location.href = "/page2.php";

This reloads the page.

Use this instead:

history.pushState({}, "", "/page2.php");

2. Trying to change to another domain

Broken example:

history.pushState({}, "", "https://othersite.com/page");

This will fail because the History API only works with the same origin.

3. Updating the URL but not updating the UI

Broken example:

history.pushState({}, "", "/settings");

If you change the URL but leave the page content unchanged, users may be confused.

Better:

renderSettingsPage();
history.({}, , );

// Reloads page
window.location.href = "/page2.php";

// Change URL without reload
history.pushState({}, "", "/page2.php");

// Change current history entry without reload
history.replaceState({}, "", "/page2.php");

// Change only the hash
location.hash = "section1";

// Read URL parts
location.href      // full URL
location.origin    // protocol + domain + port
location.pathname  // path
location.search    // query string
location.hash      // fragment

Rules

• window.location.href = ... navigates and reloads
• history.pushState() does not reload
• history.replaceState() does not reload and does not add a new history entry
• History API works only on the same origin
• use popstate to respond to back/forward navigation

Can I change the URL path without refreshing the page in JavaScript?

Yes. Use history.pushState() or history.replaceState() to update the URL without reloading.

Does window.location.href always reload the page?

Yes. Setting window.location.href triggers navigation, so the browser loads the target URL.

What is the difference between pushState and replaceState?

pushState adds a new history entry. replaceState modifies the current history entry.

Can I modify only the hash without reloading?

Yes. You can set location.hash = "section1". This usually does not reload the page.

Can I change the URL to another domain without reloading?

No. The History API only allows same-origin URLs.

How do I get the URL without the hash part?

You can use:

const beforeHash = location.origin + location.pathname + location.search;

Why does my URL change but my page content stay the same?

• History API — The main browser feature for changing the URL without reloading.
• window.location — Used to read and navigate browser URLs.
• URL query parameters — Often updated alongside the path to store filters or search state.
• Hash fragments — Useful for section links and simple client-side state.
• Single-page applications — Commonly use URL updates without full page reloads.
• popstate event — Needed to react when the user clicks back or forward.
• Client-side routing — Maps URLs to UI views in JavaScript apps.
• Same-origin policy — Explains why you cannot freely change URLs across domains.