React中“Objects are not valid as a React child”错误排查求助

你遇到的错误核心是：Route组件的element属性需要接收JSX元素（比如<Closet />），但你直接传递了requireAuth(Closet)——这个函数返回的是被Redux connect包装后的组件类/函数，属于React组件的定义，而非渲染后的元素。React尝试把这个组件对象当作子元素渲染，就抛出了"Objects are not valid as a React child"的错误。

有两种规范的修复方式：

方式1：先创建包装后的组件，再作为JSX使用 #

修改App.js：

class App extends Component {
  render() {
    // 先把Closet组件用requireAuth包装成受保护的组件
    const ProtectedCloset = requireAuth(Closet);
    
    return (
      <div>
        <Root>
          <ToastContainer hideProgressBar={true} newestOnTop={true} />
          <Routes>
            <Route exact path="/" element={<Home />} />
            {/* 使用包装好的组件的JSX形式 */}
            <Route path="/closet" element={<ProtectedCloset />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Root>
      </div>
    );
  }
}

方式2：直接在element中渲染包装后的组件（简写） #

如果不想单独声明变量，也可以直接在element里用JSX语法：

<Route path="/closet" element={<requireAuth(Closet) />} />

• 避免无限重定向循环：当前checkAuth在组件初始化和每次更新时都会触发，可能导致重复跳转。可以增加条件判断，仅在认证状态变化或当前不在登录页时执行：

componentDidUpdate(prevProps) {
  // 仅当认证状态发生变化时才检查
  if (prevProps.isAuthenticated !== this.props.isAuthenticated) {
    this.checkAuth();
  }
}

checkAuth() {
  if (!this.props.isAuthenticated) {
    const redirectAfterLogin = this.props.location.pathname;
    // 避免已经在登录页时重复跳转
    if (!this.props.location.pathname.startsWith('/login')) {
      this.props.dispatch(push(`/login?next=${redirectAfterLogin}`));
    }
  }
}

• 确认Redux Router集成：你使用的@lagunovsky/redux-react-router的push方法，需要确保该库已正确配置Redux store与React Router的集成，否则路由跳转可能失效。

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