React js cannot change page

Question

I am learning react js and have a simple webpage with a few different views, and then a few different pages. I can change between the views just fine, but when I try to go to a page (in this case the login page, but the other have the same issue) the url path changes and the default landing page is viewed instead. The default page when loading the website is: http://localhost:3000/#/dashboard

If I press the login button, the code is:

            <CButton
              onClick={async () => {
                window.location.href = "/login";
              }}
            >
              <CIcon icon={cilUser} className="me-2" />
              Login
            </CButton>

Then it should redirect me to the /login page, but instead I get redirected to: http://localhost:3000/login#/dashboard

Why is this?

This is my App.js

import React, { Component, Suspense, useState, useMemo } from "react";
import { HashRouter, Route, Switch, withRouter } from "react-router-dom";
import "./scss/style.scss";

import { UserContext } from "./UserContext";
import { getProtectedAsset } from "./getProtectedAsset";


const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
);

// Containers
const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));

// Pages
const Login = React.lazy(() => import("./views/pages/login/Login"));

const Page404 = React.lazy(() => import("./views/pages/page404/Page404"));
const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));

function App() {
  const [user, setUser] = useState({
    userID: -1,
  });
  const value = useMemo(() => ({ user, setUser }), [user, setUser]);

  return (
    <UserContext.Provider value={value}>
      <HashRouter>
        <React.Suspense fallback={loading}>
          <Switch>
            <Route
              exact
              path="/login"
              name="Login"
              render={(props) => <Login {...props} />}
            />
            <Route
              exact
              path="/register"
              name="Register Page"
              render={(props) => <Register {...props} />}
            />
            <Route
              exact
              path="/register_club"
              name="Register Club Page"
              render={(props) => <Register_club {...props} />}
            />
            <Route
              exact
              path="/404"
              name="Page 404"
              render={(props) => <Page404 {...props} />}
            />
            <Route
              exact
              path="/500"
              name="Page 500"
              render={(props) => <Page500 {...props} />}
            />
            <Route
              path="/"
              name="Home"
              render={(props) => <DefaultLayout {...props} />}
            />
          </Switch>
        </React.Suspense>
      </HashRouter>
    </UserContext.Provider>
  );
}

export default App;

Thank you for your help!

Answer 1

You are using the HashRouter so the URL you need to aim for is /#/login not /login, but that isn't the biggest problem here.

By using window.location.href you are bypassing the Router entirely and making the browser load the application again from scratch from a new URL.

Assuming you are using React Router version 6 (the current version), the equivalent of window.location.href is the navigate function from the useLocation hook.

However, since you are just creating something to click on that navigates, you should be simply using a <Link> component.

import { Link } from "react-router-dom";

<Link to="/login">
    <CIcon icon={cilUser} className="me-2" />
    Login
</Link>