React 站点刷新时出现 404 页面

Question

刷新我网站上的任何页面时，或者当我复制链接并将其粘贴到新选项卡中时，我收到 404 错误。 我正在尝试使用此线程中提到的“包罗万象”解决方案。 我不知道从哪里开始或在哪里实施什么。 我使用 firebase 主机作为我的主机平台，firebase RTDB 作为我的数据库。 这是我的路线代码的完整文件：

import React, { useContext, useEffect } from "react";
import { Route, Routes } from 'react-router-dom';
import 'bulma/css/bulma.min.css';

//pages
import LandingPage from "./pages/LandingPage";
import NavBar from "./components/NavBar";
import AboutPage from "./pages/AboutUsPage";
import ListingsPage from "./pages/ListingsPage";
import SellPage from "./pages/SellPage";
import PropertyAddPage from "./pages/PropertyAddPage";
import NetworkingPage from "./pages/NetworkingPage";
import LoginPage from "./pages/LoginPage";
import ForgotPasswordPage from "./pages/ForgotPassword";
import ProfilePage from "./pages/ProfilePage";
import ListingDetailPage from "./pages/ListingDetailPage";
import InvestorDetailPage from "./pages/InvestorDetailPage";
import LenderDetailPage from "./pages/LenderDetailPage";
import PhotographerDetailPage from "./pages/PhotographerDetailPage";
import AlertBox from "./components/AlertBox";

//context
import { AuthContext } from './contexts/Authentication';


function App() {
  const { isAuth, user, CheckAuthState, authLoading } = useContext(AuthContext);

  useEffect(() => {
    CheckAuthState()
  }, [])

  function AuthNavigator() {
    return (
      <>
        <NavBar user={null} />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route path="/about-us" element={<AboutPage />} />
          <Route path="/listings" element={<ListingsPage />} />
          <Route path="/listings/:id" element={<ListingDetailPage />} />
          <Route path="sign-in" element={<LoginPage />} />
          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
          <Route path="/networking" element={<NetworkingPage />} />
          <Route>{'404'}</Route>
        </Routes>
        <AlertBox />
      </>
    )
  }

  function MainNavigator({ user }) {
    return (
      <>
        <NavBar user={user} />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route path="/about-us" element={<AboutPage />} />
          <Route path="/listings" element={<ListingsPage />} />
          <Route path="/listings/:id" element={<ListingDetailPage />} />
          <Route path="/sell" element={<SellPage />} />
          <Route path="/sell/add-property" element={<PropertyAddPage />} />
          <Route path="sign-in" element={<LoginPage />} />
          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
          <Route path="/profile/:id" element={<ProfilePage />} />
          <Route path="/networking" element={<NetworkingPage />} />
          <Route path="/networking/investor/:id" element={<InvestorDetailPage />} />
          <Route path="/networking/lender/:id" element={<LenderDetailPage />} />
          <Route path="/networking/photographer/:id" element={<PhotographerDetailPage />} />
          <Route>{'404'}</Route>
        </Routes>
        <AlertBox />
      </>
    )
  }
  if (authLoading) {
    return <progress className="progress is-small is-info" max="100">60%</progress>

  }

  return (
    isAuth && !authLoading ?
      <MainNavigator user={user} />
      :
      <AuthNavigator />
  );
}

export default App;

Answer 1

使用HashRouter而不是BrwoserRouter来包装您的路由可防止在刷新或写入 url 时调用服务器。 但是从服务器端处理是一个更好的解决方案。