React Router报错：ProtectedRoute非Route组件问题排查

你碰到的报错是React Router v6版本API规则变更导致的：v6强制要求<Routes>的直接子元素只能是<Route>或者<React.Fragment>，你直接把自定义的ProtectedRoute组件放在<Routes>下当子节点，必然触发这个报错。

你之前代码的3个核心错误 #

• 初始版ProtectedRoute是v5的过时写法：v5支持自定义包装Route组件、支持render/component属性传参，但v6的<Route>已经完全删除了这些属性，只保留element属性接收要渲染的React节点。
• 改后的ProtectedRoute组件参数定义错误：React函数组件的入参只有一个统一的props对象，你把Component、isLoggedIn拆成独立形参，根本拿不到父组件传入的属性，逻辑完全失效。
• App.js里的根路由写法也是v5遗留的旧语法：v6不支持render属性，也不需要exact属性（默认就是精确匹配）。

正确实现代码 #

1. 重写ProtectedRoute组件 #

v6的鉴权包装组件不需要自己包裹<Route>，只做登录态判断即可：

// ProtectedRoute.js
import { Navigate, useLocation } from 'react-router-dom'

export default function ProtectedRoute({ children, isLoggedIn }) {
  const location = useLocation()
  return isLoggedIn ? 
    children : 
    <Navigate to="/" state={{ from: location }} replace />
}

2. 修正App.js路由配置 #

所有路由节点必须用<Route>标签作为<Routes>的直接子元素，ProtectedRoute放在<Route>的element属性里，包裹需要鉴权的页面组件：

// App.js 路由片段
import { Routes, Route, Navigate } from 'react-router-dom'
import ProtectedRoute from './ProtectedRoute'
import Auth from './path/to/Auth'
import Friends from './path/to/Friends'
import Home from './path/to/Home'

// ... 其他业务代码
<Routes>
  <Route
    path="/"
    element={
      !userState.isLoggedIn ? <Auth /> : <Navigate to="/home" replace />
    }
  />
  <Route path="/home" element={<Home />} />
  <Route
    path="/friends"
    element={
      <ProtectedRoute isLoggedIn={userState.isLoggedIn}>
        <Friends />
      </ProtectedRoute>
    }
  />
  {/* 其余路由按相同规则添加即可 */}
</Routes>

补充说明：v6版本中所有路由相关的参数、位置、跳转方法都需要通过对应hooks获取（比如useLocation、useParams、useNavigate），旧版本的render props传参方式已经完全移除，不要再用。

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