React Router身份验证异常：访问页面空白且无法跳转至登录页

1. 修正硬编码的验证逻辑 #

你当前的Authentication函数里硬编码了loggedin = true，这会导致验证永远通过，不会触发跳转登录的逻辑。如果是测试场景，把loggedin改成false就能看到跳转效果。

2. 确保使用React Router v6.4+的数据路由模式 #

loader函数和redirect抛出逻辑只有在数据路由模式下才会生效，也就是必须用createBrowserRouter定义路由，并通过RouterProvider渲染，而非老版本的<Routes>嵌套写法。示例代码：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Income from './Income';
import Login from './Login';
import { Authentication } from './auth';

const router = createBrowserRouter([
  {
    path: '/Income',
    element: <Income />,
    loader: async () => {
      await Authentication();
    },
  },
  {
    path: '/Login',
    element: <Login />,
  },
]);

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

export default App;

3. 排查Income组件的渲染问题 #

如果验证通过后页面空白，大概率是<Income>组件本身没有内容或者渲染出错。可以先替换成简单内容测试：

function Income() {
  return <div>Income Page 测试内容</div>;
}

4. 优化验证逻辑的动态性 #

把硬编码的登录状态改成动态获取（比如从localStorage、用户上下文或后端接口），示例：

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

export async function Authentication() {
  // 从localStorage读取实际登录状态
  const loggedin = localStorage.getItem('isLoggedIn') === 'true';
  if (!loggedin) {
    throw redirect('/Login');
  }
}

5. 统一路由路径大小写 #

React Router路径默认大小写敏感，建议统一使用小写路径（比如/login和path='login'），避免因大小写不匹配导致跳转失败。

内容的提问来源于stack exchange，提问作者Hamza Hussain