React Router 受保护路由未自动重定向至/login页面反而报错的问题求助

大伙好，我正在做一个vanlife练手项目，现在要实现React Router的受保护路由功能，结果卡住了：未登录状态下访问/host下的路由时，没有自动跳转到/login页面，反而直接报错了。按道理说，这种情况应该自动重定向到登录页才对，有没有大佬帮我看看哪里出问题了？

下面是我的代码：

main.jsx #

import { createRoot } from 'react-dom/client'
import Layout from './components/Layout.jsx';
import Home from './pages/Home.jsx';
import About from './pages/About.jsx';
import Login from './pages/Login.jsx';
import Error from './components/Error.jsx';
import Vans, { loader as vanLoader } from './pages/Vans/Vans.jsx';
import VansDetails, { loader as vanDetailLoader } from './pages/Vans/VansDetails.jsx';
import Dashboard from './pages/Host/Dashboard.jsx';
import Income from './pages/Host/Income.jsx';
import Reviews from './pages/Host/Reviews.jsx';
import HostVans, { loader as hostvanLoader } from './pages/Host/HostVans.jsx';
import HostVansDetail, { loader as hostvandetailLoader } from './pages/Host/HostVansDetail.jsx';
import Pricing from './pages/Host/HostVanDetails/Pricing.jsx';
import Photos from './pages/Host/HostVanDetails/Photos.jsx';
import Info from './pages/Host/HostVanDetails/Info.jsx';
import HostLayout from './components/HostLayout.jsx';
import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
import NotFound from './pages/NotFound.jsx';
import './server.js';
import { requireAuth } from './utils.js';
import { StrictMode } from 'react';

const router = createBrowserRouter(createRoutesFromElements(
  <Route element={<Layout />}>
    <Route index element={<Home />} />
    <Route path='about' element={<About />} />
    <Route path='vans' element={<Vans />} loader={vanLoader} errorElement={<Error />} />
    <Route path='vans/:id' element={<VansDetails />} loader={vanDetailLoader} />
    <Route path='host' element={<HostLayout />} >
      <Route index element={<Dashboard />} loader={async () => await requireAuth()} />
      <Route path='income' element={<Income />} loader={async () => await requireAuth()} />
      <Route path='reviews' element={<Reviews />} loader={async () => await requireAuth()} />
      <Route path='vans' element={<HostVans />} loader={async () => {
        await requireAuth()
        return hostvanLoader()
      }} />
      <Route path='vans/:id' element={<HostVansDetail />} loader={async (obj) => {
        await requireAuth()
        return hostvandetailLoader(obj)
      }} >
        <Route index element={<Info />} loader={async () => await requireAuth()} />
        <Route path='pricing' element={<Pricing />} loader={async () => await requireAuth()} />
        <Route path='photos' element={<Photos />} loader={async () => await requireAuth()} />
      </Route>
    </Route>
    <Route path='login' element={<Login />} />
    <Route path='*' element={<NotFound />} />
  </Route>
));

function App() {
  return (
    <div className='bg-[#FFF7ED] h-screen font-[inter] relative flex flex-col overflow-x-hidden'>
      <RouterProvider router={router} HydrateFallback={<h1>Loading...</h1>} />
    </div>
  )
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

utils.js #

import { redirect } from "react-router-dom"

export async function requireAuth() {
  const isLoggedIn = false
  if (!isLoggedIn) {
    throw redirect("/login")
  }
}

我已经在每个受保护路由的loader里都调用了requireAuth函数，里面判断未登录就抛出redirect，但就是没触发跳转反而报错了，有没有大佬帮我找找问题所在？

内容来源于stack exchange