React中如何调用函数同时返回组件？私有路由问题求助

你的问题根源是在JSX中直接放置了handleRemoveUser函数引用——React会把它当作组件尝试渲染，但函数本身不是合法的React元素，因此触发警告。同时这种写法也不会实际执行登出逻辑。

推荐修复方案（使用useEffect处理副作用） #

React中，修改状态、清理用户数据这类操作属于副作用，应该用useEffect钩子处理，避免在渲染阶段执行。调整后的代码如下：

import React, { useEffect } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import dayjs from 'dayjs';
import { useUserStore } from '@store/userStore';
import Main from '@layouts/Main';

function PrivateRoutes() {
  const { expiresIn, removeUser } = useUserStore();
  const now = dayjs();
  const isAuthenticated = window.localStorage.getItem('jwt') && dayjs(expiresIn).isAfter(now);

  useEffect(() => {
    // 当未通过认证时，执行登出操作
    if (!isAuthenticated) {
      removeUser();
    }
  }, [isAuthenticated, removeUser]);

  // 未认证直接跳转登录页
  if (!isAuthenticated) {
    return <Navigate to='/login' />;
  }

  // 认证通过则渲染主布局和嵌套路由
  return (
    <Main>
      <Outlet />
    </Main>
  );
}

export default PrivateRoutes;

关键调整说明 #

• 提取isAuthenticated变量，让认证逻辑更清晰，避免重复判断
• 用useEffect监听isAuthenticated的变化，仅在未认证时执行removeUser，符合React副作用处理规范
• 拆分返回逻辑，直接通过条件判断返回对应组件，避免在JSX中混合函数引用和React元素

备选方案（直接在条件分支执行） #

如果你不想使用useEffect，也可以在未认证的条件分支中直接执行登出函数，但需要注意：渲染阶段执行副作用可能导致重复调用（比如组件重渲染时），因此仅推荐临时使用：

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import dayjs from 'dayjs';
import { useUserStore } from '@store/userStore';
import Main from '@layouts/Main';

function PrivateRoutes() {
  const { expiresIn, removeUser } = useUserStore();
  const now = dayjs();
  const isAuthenticated = window.localStorage.getItem('jwt') && dayjs(expiresIn).isAfter(now);

  if (!isAuthenticated) {
    removeUser();
    return <Navigate to='/login' />;
  }

  return (
    <Main>
      <Outlet />
    </Main>
  );
}

export default PrivateRoutes;

内容的提问来源于stack exchange，提问作者Ignacio-Diaz