Remove # Hash from URL in React with React Router

Question

I want to remove the # Hash from the url using React Router dom. I came across the solution of putting the browserrouter around the switch with the routes, which seems to only work when you change between tabs, but when reloading or loading the site initially the # still appears

My Router Code

return (
<BrowserRouter>
<Switch>
  {!authCtx.isLoggedIn && (
    <Route
      exact
      path="/"
      component={() => (
            <Home />
      )}
    />
  )}
  {!authCtx.isLoggedIn && (
    <Route path="/Login" component={() => <Login />} />
  )}
  {authCtx.isLoggedIn && (
    <Route
      path="/EmployeeHome"
      component={() => (
          <EmployeeHome />
      )}
    />
  )}
  {authCtx.isLoggedIn && (
    <Route path="/Appointment">
      <Redirect to="/EmployeeHome" />
    </Route>
  )}
  {authCtx.isLoggedIn && (
    <Route path="/Documentations" component={() => <Documentations />} />
  )}
  {authCtx.isLoggedIn && (
    <Route
      path="/Statistic"
      component={() => (
          <Statistics />
      )}
    />
  )}

  <Route path="*">
    {authCtx.isLoggedIn && <Redirect to="/Appointment" />}
    {!authCtx.isLoggedIn && <Redirect to="/" />}
  </Route>
</Switch>
</BrowserRouter>);

What version are you using? I haven't seen hashes in a React app for years. — isherwood
– isherwood, Commented Feb 25, 2022 at 15:00
Is your app using a HashRouter? If so, then don't use a HashRouter, use one of the other high-level routers, e.g. BrowserRouter. Also, if you are using more than one router, don't. You really only need one router near the root of your app to provide a routing context for all routing/navigation components/hooks/etc... Remove all extraneous routers. You're using RRDv5 it seems, which allows you to nest routers, but it isn't recommended, and actually throws an invariant error in later version. Can you update your question to include all relevant routing & navigation code? — Drew Reese
– Drew Reese, Commented Feb 25, 2022 at 16:47
@isherwood nothing wrong with using hashrouter. Definitely preferred in situations where it's hard to do server-side url rewriting. — Evert
– Evert, Commented Nov 23, 2023 at 0:51

GMKHussain · Accepted Answer · 2022-09-22 14:53:54Z

6

if(window.location.hash) {
     window.history.replaceState("", document.title, window.location.pathname);
}

Before

site.url/home#section

After

site.url/home

answered Sep 22, 2022 at 14:53

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vhs Dec 6, 2024 at 22:30

Clever hack. Downvoted for use of window which will fail in SSR context.

Martin Geisse Feb 14 at 9:43

The question did not indicate that SSR is a concern, though.

Cornel Raiu · Accepted Answer · 2022-09-25 23:46:07Z

4

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
);

edited Sep 25, 2022 at 23:46

Cornel Raiu

3,0693 gold badges26 silver badges37 bronze badges

answered Feb 25, 2022 at 17:04

Philipp Fischer

2251 gold badge3 silver badges17 bronze badges

1 Comment

user11717481 Over a year ago

You can also use different routes instances for sections like #Home or just by short some text from url browser bar.

Marco · Accepted Answer · 2023-11-23 00:21:54Z

3

From all of the above the simplest solution is to navigate back to #, like this

navigate('#');

This way it won't change your URL and query params and it will allow you to reset the hash.

NB make sure to use useNavigate from react-router-dom in order to use the navigate function

answered Nov 23, 2023 at 0:21

Marco

1142 silver badges7 bronze badges

1 Comment

Soviut Jan 7 at 23:18

Worth noting, this will totally remove the hash, so you won't have a /# in your URL.

user11717481 · Accepted Answer · 2022-09-23 02:52:16Z

I mean you can interpret "is working now" as a favourable way to you, but indeed, these are different oriented instances from React components:

<HashRouter>

A <Router> that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

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

ReactDOM.render(
  <HashRouter
    basename={baseUrl}
    getUserConfirmation={optionalFunc}
    hashType={optionalString}>
    <App />
  </HashRouter>,
rootElement
);

<BrowserRouter>

A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

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

ReactDOM.render(
<BrowserRouter
  basename={baseUrl}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}>
  <App />
</BrowserRouter>,
rootElement
);

Collectives™ on Stack Overflow

Remove # Hash from URL in React with React Router

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related