React Router V5升级至V6后自定义SecureRoute路由报错求助

问题场景 #

• 已将React Router从V5升级至V6，自定义SecureRoute组件：用户有权限时返回<Route {...routeProps} />，无权限时返回<Route {...routeProps} element={accessForbiddenComponent} />
• 测试用例通过<MemoryRouter>直接渲染<SecureRoute>，抛出错误：

Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a

解决方案 #

1. 适配V6规则重构SecureRoute组件 #

React Router V6要求Route必须作为Routes的直接子元素，不能单独返回Route组件。重构后的SecureRoute应专注于权限判断，返回对应渲染元素：

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

// 方案1：仍返回Route，但需确保外层有Routes包裹
const SecureRoute = ({ element: Component, allowed, accessForbiddenComponent, ...rest }) => {
  const renderElement = allowed ? <Component /> : accessForbiddenComponent;
  return <Route {...rest} element={renderElement} />;
};

// 方案2：更简洁的写法，直接返回元素（推荐）
const SecureRoute = ({ element, allowed, accessForbiddenComponent }) => {
  return allowed ? element : accessForbiddenComponent;
};

使用方案2时，路由配置需放在Routes内部：

<Routes>
  <Route 
    path="/protected" 
    element={
      <SecureRoute 
        allowed={hasUserPermission} 
        element={<ProtectedPage />} 
        accessForbiddenComponent={<AccessForbidden />} 
      />
    } 
  />
</Routes>

2. 修改测试用例结构 #

测试时必须将SecureRoute（或其关联的Route）包裹在Routes组件中，再用MemoryRouter包裹：

import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import SecureRoute from './SecureRoute';
import ProtectedPage from './ProtectedPage';
import AccessForbidden from './AccessForbidden';

// 测试有权限的情况
test('renders protected page when user has permission', () => {
  render(
    <MemoryRouter>
      <Routes>
        <SecureRoute 
          path="/" 
          element={<ProtectedPage />} 
          allowed={true} 
          accessForbiddenComponent={<AccessForbidden />} 
        />
      </Routes>
    </MemoryRouter>
  );
  expect(screen.getByText('Protected Content')).toBeInTheDocument();
});

// 测试无权限的情况
test('renders access forbidden when user lacks permission', () => {
  render(
    <MemoryRouter>
      <Routes>
        <SecureRoute 
          path="/" 
          element={<ProtectedPage />} 
          allowed={false} 
          accessForbiddenComponent={<AccessForbidden />} 
        />
      </Routes>
    </MemoryRouter>
  );
  expect(screen.getByText('Access Forbidden')).toBeInTheDocument();
});

核心原因 #

React Router V6废弃了V5中直接渲染Route的方式，强制所有Route必须嵌套在Routes组件内，以此优化路由匹配逻辑。自定义权限路由需要遵循这一新规则，从返回Route组件转变为处理路由渲染元素的逻辑。

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