React Router 重定向功能不起作用

Question

我正在 React 路由器中实现一个虚假身份验证系统，当用户未登录时，该系统将用户重定向到带有路由“/login”的登录页面。该功能位于 utils.js 中，我将其导出到我的应用程序定义路由的 .js 文件。

utils.js 中的函数非常基本，如下所示

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

export async function requireAuth() {
    const isLoggedIn = false

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

然后我直接在 App.js 的 loader 属性中导入并提供函数调用，就像这样

import React from 'react';
import { 
  Route, 
  RouterProvider, 
  createBrowserRouter, 
  createRoutesFromElements,
} from 'react-router-dom';
import './server.js';
import './App.css';
import Home from './pages/Vans/Home';
import About from './pages/Vans/About';
import Vans, { loader as vansLoader } from './pages/Vans/Vans';
import Login from './pages/Auth/Login.jsx';
import VanDetail, { loader as vanLoader } from './pages/Vans/VanDetail';
import Layout from './components/Layout';
import HostLayout from './components/HostLayout';
import Dashboard from "./pages/Host/Dashboard";
import Income from './pages/Host/Income';
import HostVans, { loader as hostVansLoader } from "./pages/Host/HostVans";
import HostVanDetail, { loader as hostVanLoader } from './pages/Host/HostVanDetail';
import HostVanInfo from './components/HostVanInfo.jsx';
import Reviews from './pages/Host/Reviews';
import HostVanPrice from './components/HostVanPrice.jsx';
import HostVanPhotos from './components/HostVanPhotos.jsx';
import NotFound from './components/NotFound.jsx';
import Error from './components/Error.jsx';
import { requireAuth } from './utils.js';

const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<Layout />} errorElement={<Error />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route
      path="login"
      element={<Login />}
    />
    <Route
      path="vans"
      element={<Vans />}
      loader={vansLoader}
    />
    <Route 
      path="vans/:id" 
      element={<VanDetail />} 
      loader={vanLoader}
    />
    <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={hostVansLoader}
      />
      <Route
        path="vans/:id"
        element={<HostVanDetail />}
        loader={hostVanLoader}
      >
        <Route
          index
          element={<HostVanInfo />}
          loader={async () => await requireAuth()}
        />
        <Route
          path="pricing"
          element={<HostVanPrice />}
          loader={async () => await requireAuth()}
        />
        <Route
          path="photos"
          element={<HostVanPhotos />}
          loader={async () => await requireAuth()}
        />
      </Route>
    </Route>
    <Route path="*" element={<NotFound />} />
  </Route>
))

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

当我尝试转到 /host 路由时，我期望 React 路由器路由到 /login 页面，它会在屏幕上呈现一个空白页面。我检查了开发工具中的“网络”选项卡，它没有获取登录页面文档，而是获取带有 HTTP 代码 304 的相同主机文档。有人可以帮我解决这个问题吗？

Answer 1

对于

react-router

v6，您只需

return

redirect

函数，并将

requireAuth

函数引用直接传递给

loader

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

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

    if (!isLoggedIn) {
        return redirect("/login");
    }
}

import React from 'react';
import { 
  Route, 
  RouterProvider, 
  createBrowserRouter, 
  createRoutesFromElements,
} from 'react-router-dom';
import './server.js';
import './App.css';
import Home from './pages/Vans/Home';
import About from './pages/Vans/About';
import Vans, { loader as vansLoader } from './pages/Vans/Vans';
import Login from './pages/Auth/Login.jsx';
import VanDetail, { loader as vanLoader } from './pages/Vans/VanDetail';
import Layout from './components/Layout';
import HostLayout from './components/HostLayout';
import Dashboard from "./pages/Host/Dashboard";
import Income from './pages/Host/Income';
import HostVans, { loader as hostVansLoader } from "./pages/Host/HostVans";
import HostVanDetail, { loader as hostVanLoader } from './pages/Host/HostVanDetail';
import HostVanInfo from './components/HostVanInfo.jsx';
import Reviews from './pages/Host/Reviews';
import HostVanPrice from './components/HostVanPrice.jsx';
import HostVanPhotos from './components/HostVanPhotos.jsx';
import NotFound from './components/NotFound.jsx';
import Error from './components/Error.jsx';
import { requireAuth } from './utils.js';


const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<Layout />} errorElement={<Error />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="login" element={<Login />} />
    <Route path="vans" element={<Vans />} loader={vansLoader} />
    <Route path="vans/:id" element={<VanDetail />} loader={vanLoader} />
    <Route path="host" element={<HostLayout />}>
      <Route index element={<Dashboard />} loader={requireAuth} />
      <Route path="income" element={<Income />} loader={requireAuth} />
      <Route path="reviews" element={<Reviews />} loader={requireAuth} />
      <Route path="vans" element={<HostVans />} loader={hostVansLoader} />
      <Route path="vans/:id" element={<HostVanDetail />} loader={hostVanLoader}>
        <Route index element={<HostVanInfo />} loader={requireAuth} />
        <Route path="pricing" element={<HostVanPrice />} loader={requireAuth} />
        <Route path="photos" element={<HostVanPhotos />} loader={requireAuth} />
      </Route>
    </Route>
    <Route path="*" element={<NotFound />} />
  </Route>
));

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;