当我从主页转到任何页面时，都会出现“哎呀，看起来页面丢失了”

Question

我在 Hostinger 中发布了我的网站，它运行良好，但是当我转到另一个页面时，我看到的页面如上所示。我尝试通过更改链接但文本来修复它，但它没有修复它。 注意“我在子域中托管我的网站”

这是我的代码

//App File

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home, AboutPage, ProjectsPage } from "./pages/index";
/**import {
  Hero,
  About,
  Skills,
  Projects,
  Contact,
  Footer,
} from "./sections/index"; */
//import { Navigator } from "./components/index";

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/projects" element={<ProjectsPage />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

//Navbar component
import "./Navbar.css";
import Logo from "../../assets/images/MegaSiteLogo.png";

const menus = ["Home", "About", "Projects", "Contact us"];

const Navbar = () => {
  return (
    <div className="navbar navbar-expand-md text-black shadow-sm mb-3">
      <div className="container">
        <a href="/" className="navbar-brand">
          <img src={Logo} alt="logo" width={"120px"} />
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mainmenu"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="mainmenu">
          <ul className="navbar-nav ms-auto">
            {menus.map((menu) => (
              <li className="nav-item" key={menu}>
                <a
                  key={menu}
                  href={
                    menu === "Home"
                      ? "/"
                      : menu === "Contact us"
                      ? "#contact"
                      : menu === "About"
                      ? "/about"
                      : menu === "Projects"
                      ? "/projects"
                      : menu
                  }
                  className="nav-link"
                >
                  {menu}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Navbar;

我尝试更改链接文本并在 Youtube 和 Google 上搜索，但没有任何反应，也没有找到任何内容

Answer 1

您需要使用

<Link/>

而不是

<a>

与 React Router，否则它将无法检测到页面更改

Answer 2

找到任何解决方案吗，React 和 Hostinger？