意外的应用程序错误！ -无法使用react-router-dom中的react loader进行重定向

Question

我正在尝试使用

react-router-dom

中的 React 加载器来实现受保护的路由。 我的

loader

标签中有一个

Route

属性，它调用虚拟

requireAuth()

函数来检查路由是否经过身份验证。该函数存在于 util 类中。如果身份验证错误，它会重定向到

/login

路径。

这是代码：

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

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

这是我配置路线的方式：

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  RouterProvider,
  createHashRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import Dashboard from './pages/hosts/Dashboard';
import Login from './pages/Login';
import { requireAuth } from './utils';
const hashRouter = createHashRouter(createRoutesFromElements(
  <Route path='/' element={<Layout />}>
    <Route index element={<Home />} />
    <Route path='login' element={<Login />} />
    <Route path='about' element={<About />} />
    <Route path='vans' 
    element={<Vans />} 
    loader={vansLoader} 
    errorElement={<Error/>}
    />
    <Route 
    path='vans/:id' 
    element={<VanDetail />}
    loader={vanDetailLoader}
    />
    <Route 
    path='host' element={<HostLayout />} >
      <Route
        index
        element={<Dashboard />}
        loader={async () => await requireAuth()}
      />
      <Route 
      path='income' 
      element={<Income />}  
      loader={ 
        async ()=>{
        return null
      }}/>
      <Route 
      path='reviews' 
      element={<Reviews />}  
      loader={ 
        async ()=>{
        return null
      }}/>
      <Route 
      path='vans'
       element={<HostVans />}  
      loader={hostVansLoader}/>
      <Route 
      path='vans/:id' 
      element={<HostVansDetail/>} 
      loader={ hostVanDetailLoader}
      >
        <Route 
        index 
        element={<HostVanInfo />}  
        loader={ 
          async ()=>{
          return null
        }}/>
        <Route 
        path='pricing' 
        element={<HostVanPricing />} 
        loader={ 
          async ()=>{
          return null
        }} />
        <Route 
        path='photos' 
        element={<HostVanPhotos />}  
        loader={ 
          async ()=>{
          return null
        }}/>
  </Route>
</Route>
<Route path='*' element={<PageNotFound />} />
  </Route>
    ));

function App() {
  return (
    <RouterProvider router={hashRouter} />
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />
);

当我加载 /host 路径时，它应该将我重定向到 /login 路由。但我得到了错误

我是新的反应者，我正在学习。请指教。

Answer 1

您需要

return redirect("/login")

，而不是在加载器函数中将其作为错误抛出。另外，如果 isLoggedIn 在您的生产代码中为 true，我建议在 if 块之后返回 null 以允许默认页面加载行为

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

参考