CODEWITHSUNDEEP
reactjsreact-router
Philipp Fischer
Philipp Fischer

Reputation: 225

Remove # Hash from URL in React with React Router

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

Upvotes: 2

Views: 13778

Answers (4)

Marco
Marco

Reputation: 104

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

Upvotes: 2

Philipp Fischer
Philipp Fischer

Reputation: 225

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

Upvotes: 4

user11717481
user11717481

Reputation: 1602

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

Upvotes: 1

GMKHussain
GMKHussain

Reputation: 4681

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

Before

site.url/home#section

After

site.url/home

Upvotes: 4

Related Questions