出现空白页。用户未重定向到登录

Question

我试图在用户访问网站的任何部分之前对其进行身份验证，但出现空白页面并且用户没有重定向。

代码：

认证功能：

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

export async function Authentication() {
  const loggedin = true;
  if (!loggedin) {
    throw redirect('/Login')
  }
}

收入路线： // 这里出现问题。此页面变得空白且未重定向。

<Route
  path='Income'
  element={<Income />}
  loader={async() => {
    return await Authentication();
  }}
/>

登录路线：

<Route path='Login' element={<Login />} />

我试图在用户访问网站的任何页面之前对其进行身份验证，但出现空白页面并且无法重定向用户。

Answer 1

你可以试试这个

<Routes>
  <Route path="/log-in" element={<Login/>} />
  <Route element={<ProtectedRoute />}>
    <Route path="/Income" element={<Income />} />
    {/* Handle other Protected routes */}
  </Route>
</Routes>

里面

ProtectedRoute file

//ProtectedRoute.js

import { redirect } from "react-router-dom";
import {Authentication} from "./your-file-path"

export const ProtectedRoute = () => {
  useEffect(() => {
    (async () => {
      await Authentication();
    })();
  }, []);

  return <></>;
};