Remove Hash from Url

How to remove the hash from window.location (URL) with JavaScript without page refresh?

Initial question:

window.location.href.substr(0, window.location.href.indexOf('#'))

window.location.href.split('#')[0]

both will return the URL without the hash or anything after it.

With regards to your edit:

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

MOST UP-TO-DATE ANSWER

The right answer on how to do it without sacrificing (either full reload or leaving the hash sign there) is up here. Leaving this answer here though with respect to being the original one in 2009 whereas the correct one which leverages new browser APIs was given 1.5 years later.

Remove #Hash from url without refreshing.

If you want the hash link to function normally but just want the hash cosmetically erased, this code might be fine for you:

<!DOCTYPE html>
<html>

<a class="nav-link" href="#home" onClick="removehash()">Home</a>

<div style="height:3000px"></div>

<h1 id="home">HOME</h1>

<script>
    function removehash(){
        setTimeout(function(){
            history.replaceState("", document.title, window.location.pathname);
        }, 1);
    }
</script>

But the more correct way would probably be to attach a new event that controls the y-offset of the page. That's a bit trickier. Let me know if you're looking for that answer instead.

Remove hash from url

Updated Answer:

Best way to achieve this is to follow Homero Barbosa's answer below:

history.pushState("", document.title, window.location.pathname);

... or, if you want to maintain the search parameters:

history.pushState("", document.title, window.location.pathname + window.location.search);

Original Answer, do not use this, badwrongfun:

var loc = window.location.href,
    index = loc.indexOf('#');

if (index > 0) {
  window.location = loc.substring(0, index);
}

... but that refreshes the page for you which seems a trifle rude after just arriving there. Grin and bear it seems to be the best option.

How to remove the hash # symbol from url?

Vue is a Single Page Application framework. That means you don't have full page loads, instead page content is swapped out dynamically on the client.

Assuming you're using vue router, you can switch to historyMode which won't use # for urls and instead real urls.

From the docs:

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
 mode: 'history',
  routes: [...]
})

This will get you "normal" urls as seen anywhere else on the web.

Remove hash (#) & value from the URL using javascript?

There is no direct way of doing it.

As for the Answer shared by Pabel de Jesus Nuñez Landestoy on the top. Current workaround for this is writing a small function,

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Original answer is by: Andy E

Remove # Hash from URL in React with React Router

My problem was that I was using a HashRouter
and also a react-router-dom version <=6.0. I updated everything and changed to the v6 of the react-router-dom and used the BrowserRouter instead and now it works.

Here is my Code:

React Router

<Routes>
  {!authCtx.isLoggedIn && (
    <Route
      exact
      path="/"
      element={
            <Home />
      }
    />
  )}
  {!authCtx.isLoggedIn && <Route path="/Login" exact element={<Login />} />}
  {authCtx.isLoggedIn && (
    <Route
      exact
      path="/EmployeeHome"
      element={
          <EmployeeHome />
      }
    />
  )}
  {authCtx.isLoggedIn && (
    <Route
      exact
      path="/Documentations"
      element={ <Documentations />}
    />
  )}
  {authCtx.isLoggedIn && (
    <Route
      exact
      path="/Statistic"
      element={
          <Statistics />
      }
    />
  )}
  {authCtx.isLoggedIn && (
    <Route path="*" element={<Navigate to="/EmployeeHome" />} />
  )}
  {!authCtx.isLoggedIn && <Route path="*" element={<Navigate to="/" />} />}
</Routes>

Index.js

const baseUrl = document.getElementsByTagName("base") 
[0].getAttribute("href");
const rootElement = document.getElementById("root");

ReactDOM.render(
    <BrowserRouter basename={baseUrl}>
      <App />
    </BrowserRouter>,
rootElement
);

How to remove hash (#) from URL in Flutter web

You can now use a simple package and a single line of code to remove the leading hash (#) from your Flutter web app: url_strategy (full disclosure: I am the author)

Using `url_strategy`

You simply add the dependency as described here and then add the following function call to your main function:

import 'package:url_strategy/url_strategy.dart';

void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.
  setPathUrlStrategy();
  runApp(MyApp());
}

Calling setPathUrlStrategy is all you need to do /p>

The package also ensures that running the code will not crash on mobile (see below). Additionally, this will also run on stable if you build your mobile app on stable and only web on beta.

Notes

You need to make sure that you include <base href="/"> inside the <head> section of your web/index.html when using the path URL strategy.

This is added by default when creating a new Flutter app.

Furthermore, when deploying your production app, you need to make sure that every path points to your index.html. If you use tools like Firebase hosting, this is done automatically for you when configuring your app as a single page app.

Otherwise, you want to look up how to rewrite all paths to your index.html for the hosting you are using.

Essentially, you want to have a single page app, where the HTTP server serves the index.html for all paths.

The package implementation is based on the manual solution using flutter_web_plugins. The benefits of using the package are the following:

Only need to call a single function.
No need to use conditional imports (the package does it for you).
You will not get any missing implementation issues on stable (as the web feature is still on beta).

Remove hash(#) in URL Angular 11

PathLocationStrategy is the default location strategy of Angular Routing, It should work and resolve your hash(#) problem.

There is no error in your code, double check below points

RouterModule.forRoot(routes, { useHash: true }) //use Hash should not be there
providers: [
// Below line is optional as default LocationStrategy is PathLocationStrategy
{provide: LocationStrategy, useClass: PathLocationStrategy}
]

If you are only facing issue in server when deployed, Please check the entry point configuration in the server. It should be index.html file.

NOTE: when using PathLocationStrategy you need to configure your web server to serve index.html (app's entry point) for all requested locations.

Also check the <base href="/"> in index.html and at the backend server, we must render the index.html file according to path.

Remove Hash from Url

How to remove the hash from window.location (URL) with JavaScript without page refresh?

Remove #Hash from url without refreshing.

Remove hash from url

How to remove the hash # symbol from url?

Remove hash (#) & value from the URL using javascript?

Remove # Hash from URL in React with React Router

How to remove hash (#) from URL in Flutter web

Using `url_strategy`

Notes

Remove hash(#) in URL Angular 11

Related Topics

Leave a reply

How to remove the hash from window.location (URL) with JavaScript without page refresh?

Remove #Hash from url without refreshing.

Remove hash from url

How to remove the hash # symbol from url?

Remove hash (#) & value from the URL using javascript?

Remove # Hash from URL in React with React Router

How to remove hash (#) from URL in Flutter web

Using url_strategy

Notes

Remove hash(#) in URL Angular 11

Related Topics

Leave a reply

Using `url_strategy`