React Router v6封装Route组件无法渲染，如何实现自定义Route组合

React Router v6不支持将自定义封装的Route组件直接作为Routes的直接子节点使用。Routes组件构建路由匹配规则时，仅会读取、解析其直接子Route组件的配置，不会深入自定义组件内部读取返回的Route节点，这是v6版本的设计特性，早期beta版本的相关支持后续已被官方移除。你示例中封装的Wrapped组件直接放在Routes下无法匹配，就是因为Routes将其识别为非Route的自定义组件，直接跳过了配置解析，所以对应路径永远不会命中。

你想要实现的ProtectedRoute能力，可以通过以下两种常规方案实现：

• 方案一：封装权限判断逻辑包裹目标元素，Route组件仍然直接作为Routes的子节点使用

// 权限校验封装
const Protected = ({ children, redirectRoute }: { children: React.ReactNode, redirectRoute: string }) => {
  const { isAuthenticated } = useAuth();
  return isAuthenticated() ? children : <Navigate to={redirectRoute} />
}

// 路由配置写法
const App = () => (
  <Routes>
    <Route 
      path="/protected" 
      element={
        <Protected redirectRoute="/login">
          <span>受保护的内容</span>
        </Protected>
      } 
    />
    <Route path="/inline" element={<span>Inline works</span>} />
  </Routes>
)

• 方案二：将路由配置抽为对象数组，批量生成Route节点，适合多路由统一加权限的场景

const routeConfig = [
  {
    path: '/protected',
    element: <span>受保护的内容</span>,
    needAuth: true,
    redirectRoute: '/login'
  },
  {
    path: '/inline',
    element: <span>Inline works</span>,
    needAuth: false
  }
]

const App = () => (
  <Routes>
    {routeConfig.map(route => {
      const finalElement = route.needAuth ? (
        <Protected redirectRoute={route.redirectRoute}>
          {route.element}
        </Protected>
      ) : route.element
      return <Route path={route.path} element={finalElement} />
    })}
  </Routes>
)

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