还是喜欢这样的路由管理，单独拆封成一个文件，

jsx

import { createBrowserRouter } from 'react-router-dom';

import App from'../App';
import Login from '../pages/login/login';
import Home from '../pages/home/Home';


const routes = [
  {
    path: '/',
    element: <Navigate to="/login" replace />, // 重定向路由,replace 属性表示使用替换模式进行重定向，这样不会在历史记录中留下 / 路径的记录
  
  },
  {
    path: '/login',
    element: <Login/>
  },
  {
    path: '/home',
    element: <Home/>

  }
];


const router = createBrowserRouter(routes);
export default router;

想在React里面实现类似路由守卫的功能，也就是在前往/home页面的时候检测用户是否登录对访问进行拦截，在vue里面，使用下面的代码

js
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token'); // 检查 localStorage 中的 token

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果目标路由需要认证
    if (!isAuthenticated) {
      // 如果未登录，重定向到登录页面
      next('/login');
    } else {
      // 如果已登录，继续导航
      next();
    }
  } else {
    // 如果目标路由不需要认证，继续导航
    next();
  }
});

export default router;

在React我们可以用自定义Hook实现，使用useEffect hook，他会在组件渲染前进行执行一次，只需要在执行时检查用户凭证就好 刚开始是这样

jsx
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const useAuth = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // 检查 localStorage 中的 token
    const token = localStorage.getItem('token');

    if (!token) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return null;
};

export default useAuth;



// Home.jsx


const Home = () => {
    useAuth();
    return ...
}

这样的代码没问题，他会在跳转Home页面检查登陆凭证，并拦截跳转到Home,但是不完美，因为会出现一瞬间的Home页面，代表重定向前组件已经渲染，我们只需要做一点简单的判断，修改一下自定义Hook

jsx
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    // 检查 localStorage 中的 token
    const token = localStorage.getItem('token');

    if (token) {
      setIsAuthenticated(true);
    } else {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return isAuthenticated;
};

export default useAuth;


// Home.jsx

  const isAuthenticated = useAuth(); // 使用自定义 Hook 进行权限检查

  if (!isAuthenticated) {
    return null; // 如果未认证，返回 null 不渲染组件
  }

但我不确定这是不是最佳实践

今晚就先这样