使用react-router-dom V6遇React子元素无效函数错误求助

错误信息翻译 #

错误：函数不能作为React子元素。这种情况可能是因为你在render中返回了一个Component而不是<Component />，或者你可能是想调用这个函数而不是返回它。

问题原因 #

1. Route用法不符合V6规范：react-router-dom V6废弃了Route的component属性，改用element属性接收JSX元素，同时不能在Route标签内部直接返回函数作为子元素。
2. Redirect组件已被移除：V6中不再支持Redirect，需替换为Navigate组件。
3. 直接返回函数导致渲染错误：你在判断登录状态时返回了箭头函数，React无法渲染函数类型的子元素，触发报错。

修正方案 #

方案一：直接在Route的element中处理判断 #

首先导入Navigate组件：

import { Route, Navigate } from 'react-router-dom';

然后修改路由代码：

const logged = false;

<Route 
  path='/profile' 
  element={
    logged ? (
      <ProfilePage />
    ) : (
      <>
        {alert('You must start session')}
        <Navigate to='/login' replace />
      </>
    )
  } 
/>

方案二：封装私有路由组件（推荐） #

封装可复用的ProtectedRoute组件，更符合V6的路由设计：

import { Navigate, Outlet } from 'react-router-dom';

// 私有路由组件
const ProtectedRoute = ({ logged }) => {
  if (!logged) {
    alert('You must start session');
    return <Navigate to='/login' replace />;
  }
  // Outlet渲染匹配到的子路由内容
  return <Outlet />;
};

// 使用私有路由
<Route path='/profile' element={<ProtectedRoute logged={logged} />}>
  <Route index element={<ProfilePage />} />
</Route>

关键说明 #

• replace属性：添加到Navigate组件后，会替换当前历史记录，避免用户通过浏览器后退按钮回到需要登录的页面。
• Outlet：V6中用于渲染嵌套路由的内容，是实现路由布局和保护的核心组件。

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