React路由保护组件报错：Objects are not valid as a React child

错误原因 #

你遇到的Objects are not valid as a React child错误，根源是Protected组件的参数处理错误。React函数组件接收的第一个参数是props对象，而非直接的children。你当前的写法把props对象直接命名为children，返回时实际上返回了整个props对象（包含children键的对象），而React无法渲染普通对象，因此抛出错误。

修复方案 #

修改Protected组件，正确解构props中的children：

import React from 'react'
import { Navigate } from 'react-router-dom'

const Protected = ({ children }) => { // 改为解构props中的children
  const id = localStorage.getItem('id')
  if (!id) {
    console.log(id)
    return <Navigate to="login" replace />
  }
  return children 
}

export default Protected

其他验证说明 #

• 你存储用户ID的代码localStorage.setItem('id', response.data[0].idmain_table)是正确的，localStorage会自动将数字类型的ID转为字符串存储，无需额外处理。
• 路由中用<Protected><DefaultLayout /></Protected>包裹受保护组件的写法没问题，组件修复后即可正常渲染受保护路由内容。

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