无法在React Router DOM中使用redirect()进行重定向

Question

我的主机组件中有一个 loader 道具，如下

<Route
path="host"
element={<LayoutHost />}
loader={async () => await requireAuth()}>

首先加载程序将加载，我正在检查用户是否已登录，如下

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

export async function requireAuth() {
    const isLoggedIn = false

    if (!isLoggedIn) {
        throw redirect("/login")
    }
}

但是此重定向无法正常工作。

这是我的 app.jsx，我正在其中渲染所有路线：

import React from "react";
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
} from "react-router-dom";
import "./pages/server";
import About from "./pages/About";
import Home from "./pages/Home";
import Vans, { loader as Fetchingg } from "./pages/Vans";
import VanTile, { loader as VansTileLoader } from "./pages/VanTile";
import Layout from "./Components/Layout";
import LayoutHost from "./Components/LayoutHost";
import Dashboard from "./pages/Host/Dashboard";
import Income from "./pages/Host/Income";
import Reviews from "./pages/Host/Reviews";
import HostsVan, { loader as HostVansLoader } from "./pages/Host/HostsVan";
import HostsVanDetail, { loader as HostVansDetailLoader } from "./pages/Host/HostVanDetail";
import Detail from "./pages/Host/Detail";
import Pricing from "./pages/Host/Pricing";
import Photos from "./pages/Host/Photos";
import Page404 from "./Components/404";
import Login from "./Login";
import { requireAuth } from "./utils";


const router = createBrowserRouter(createRoutesFromElements(
  <Route
    path="/"
    element={<Layout />}
  >
    <Route
      index
      element={<Home />}
    />
    <Route
      path="about"
      element={<About />}
    />
    <Route
      path="login"
      element={<Login />}
    />
    <Route
      path="vans"
      element={<Vans />}
      loader={Fetchingg}
    />
    <Route
      path="vans/:id"
      element={<VanTile />}
      loader={VansTileLoader}
    />
//this is where the problem starts
    <Route
      path="host"
      element={<LayoutHost />}
      loader={async () => await requireAuth()}>
      <Route
        index
        element={<Dashboard />}
        loader={async () => {
          return null
        }}
      />
      <Route
        path="income"
        element={<Income />}
        loader={async () => {
          return null
        }}
      />
      <Route
        path="hostvans"
        element={<HostsVan />}
        loader={HostVansLoader}
      />
      <Route
        path="hostvans/:id"
        element={<HostsVanDetail />}
        loader={HostVansDetailLoader}
      >
        <Route
          index
          element={<Detail />}
          loader={async () => {
            return null
          }}
        />
        <Route
          path="pricing"
          element={<Pricing />}
          loader={async () => {
            return null
          }}
        />
        <Route
          path="photos"
          element={<Photos />}
          loader={async () => {
            return null
          }}
        />
      </Route>
      <Route
        path="reviews"
        element={<Reviews />}
        loader={async () => {
          return null
        }}
      />
    </Route>
    <Route
      path="*"
      element={<Page404 />}
    />
  </Route>
))

export default function App() {
  return (
    <RouterProvider router={router} />
  );
}

如果我使用 return 代替 throw，那么即使条件为 true，它也会简单地渲染 LayoutHost 组件而不重定向，但是当我使用 throw 时，它会在屏幕上显示错误，如下所示 React Router 默认 ErrorBoundary 处理的错误： 如果我简单地使用 redirect() 而不使用 return 或 throw 那么它会给出以下错误 ErrorBoundary：错误：您为路线“0-5”定义了一个加载程序，但没有从

loader

函数返回任何内容。请返回一个值或

null

。

Answer 1

尝试使用导航代替，看看下面的代码 -

import { Navigate } from "react-router-dom";

export async function requireAuth() {
    const isLoggedIn = false;

    if (!isLoggedIn) {
        return <Navigate to="/login" />;
    }
}