I've built my website with react and everything is working perfectly (so it seems) locally and on other computers. I've tried multiple times on different mobile devices but every time I try to access another page using Reacts HashRouter I get a 404 error. I've tried hosting my page through netlify and I get the exact same results. Also my styling gets all messed up to for some reason. If anyone can provide me some answers I'd greatly appreciate it, I've been stumped for awhile.

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  HashRouter,
} from "react-router-dom";
import Home from "./pages/Home";
import HowToOrder from "./pages/HowToOrder";
import Menu from "./pages/Menu";
import ErrorPage from "./pages/ErrorPage";
import Contact from "./pages/Contact";

const App = () => {
  return (
    <>
      <HashRouter>
        <div className="container-fluid g-0">
          <nav className="navbar nav justify-content-center px-5 ">
            <Link className="nav_link" to="/">
              <strong>Home</strong>
            </Link>
            <Link className="nav_link" to="/Menu">
              <strong>Menu</strong>
            </Link>
            <Link className="" to="/">
              <img
                className="img-fluid
                rounded"
                src={Chefness}
                width="280px"
                height="280px"
              />
            </Link>
            <Link className="nav_link" to="/HowToOrder">
              <strong>Order</strong>
            </Link>
            <Link className="nav_link" to="/Contact">
              <strong>Contact</strong>
            </Link>
          </nav>
        </div>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Menu" element={<Menu />} />
          <Route path="/Contact" element={<Contact />} />
          <Route path="/HowToOrder" element={<HowToOrder />} />
          <Route path="*" element={<ErrorPage />} />
        </Routes>
      </HashRouter>
    </>
  );
};

export default App;