为什么当我刷新托管商上托管的网站时会收到错误 404？

Question

我使用vite创建了一个React+Typescript项目

应用程序.tsx

<BrowserRouter>
  <Routes>
    <Route path={routes.homepage} index element={<Home />} />
    <Route path={routes.admindash} index element={<AdminDashboard />} />
    <Route path={routes.error} index element={<ErrorPage />} />
  </Routes>
</BrowserRouter>

routes.admin 是“/admin/*”

Home.tsx

   <div className="h-full w-[100vw] lg:w-[50vw] flex flex-col items-center justify-center">
      <img
        src={fueldeylogo}
        alt="fueldeylogo"
        className="w-[40%] md:w-[15%] lg:w-[20%] mb-5"
      />
      <div
        style={{ "--scroll-width": isMobile ? "5px" : "2px" } as any}
        className="relative w-[95vw] lg:w-[35vw] h-fit max-h-[80vh] md:max-h-[55vh] lg:max-h-[60vh] overflow-y-auto lg:shadow-form-bx-sh"
      >
        <Routes>
          <Route path={"/"} index={true} element={<SignIn />} />
          {/* <Route path={routes.signup} element={<SignUp />} /> */}
          <Route path={routes.f_password} element={<ForgotPassword />} />
          <Route path={routes.resetPassword} element={<ResetPassword />} />
        </Routes>
      </div>
    </div>

登录组件，登录组件如下，并且导航良好。

  useEffect(() => {
     if (isAuth) {
     navigate("/admin");
   }
 }, [isAuth]);

管理仪表板.tsx

    export const AdminDashboard = () => {
const pathName = useLocation().pathname;
useEffect(() => {
    if (pathName === "/admin") {
      navigate(routes.dashboard);
      setMainNavIndex(0);
    } else if (pathName === "/admin/" + routes.vendors) {
      setMainNavIndex(1);
      navigate(routes.vendors);
    } else if (pathName === "/admin/" + routes.buyers) {
      setMainNavIndex(2);
      navigate(routes.buyers);
    } else if (pathName === "/admin/" + routes.notifications) {
      setMainNavIndex(3);
      navigate(routes.notifications);
    } else if (pathName === "/admin/" + routes.staffMngt) {
      setMainNavIndex(4);
      navigate(routes.staffMngt);
    } else if (pathName === "/admin/" + routes.settings) {
      setMainNavIndex(5);
      setSubNavIndex(0);

      navigate(routes.settings);
    }
  }, [pathName]);
return (
<div className="h-[90vh] overflow-y-auto">
          <Routes>
            <Route
              path={routes.adminDash}
              index
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <DashboardAdmin />
                </ProtectedRoute>
              }
            />
            <Route
              path={routes.vendors}
              index
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <Vendors />
                </ProtectedRoute>
              }
            />
            <Route
              path={routes.buyers}
              index
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <Buyers />
                </ProtectedRoute>
              }
            />
            <Route
              path={routes.notifications}
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <Notifications />
                </ProtectedRoute>
              }
            />
            <Route
              path={routes.staffMngt}
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <StaffMngt />
                </ProtectedRoute>
              }
            />
            <Route
              path={routes.settings}
              element={
                <ProtectedRoute isAuth={isAuth}>
                  <Settings subIndex={subNavIndex} />
                </ProtectedRoute>
              }
            />
          </Routes>
        </div>
 );
};

routes.dashboard 是“仪表板”

我已经编辑了 .htaccess 文件，如下所示。 .htaccess 文件位于托管服务器上的 public_html 文件夹内。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  
  RewriteRule . /index.html [L]
</IfModule>

在https://example.com中刷新浏览器不会出现404错误，但在https://example.com/admin/dashboard

中刷新浏览器时会出现404错误

Answer 1

您的

*

中缺少

RewriteRule

，并且还删除了

RewriteBase

并将斜杠添加到第一个

RewriteRule

，因为它也会影响最后一个 RewriteRule：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^/index\.html$ - [L]
  
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  
  RewriteRule .* /index.html [L]
</IfModule>