无法使用 HOC (ReactJS) 包装路由组件答案

【问题标题】：Can't Wrap a Route Component with an HOC (ReactJS)无法使用 HOC (ReactJS) 包装路由组件
【发布时间】：2022-01-08 16:46:33
【问题描述】：

嘿，我不能用 HOC 包装我的路由组件。我正在使用 react-router-dom v6 但我无法完成这项工作

这是我的实现：

<Route path="/dashboard" element={AuthGuard(<Dashboard />)} />

HOC：

import React from "react";
import { Navigate } from "react-router-dom";
import { firebase } from "../firebase";

    const AuthGuard = (Component) => {
      class AuthHoc extends React.Component {
        authCheck = () => {
          const user = firebase.auth().currentUser;
          console.log("USER:: ", user);
          if (user) {
            return <Component {...this.props} />;
          } else {
            return <Navigate to="/" />;
          }
        };
        render() {
          return this.authCheck();
        }
      }
      return AuthHoc;
    };
    
    export default AuthGuard;

我得到这个错误：

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者你可能打算调用这个函数而不是返回它

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

就像错误说你将一个函数作为一个反应孩子放置。所以元素实际上需要是一个有效的反应组件。如果您返回有效的 jsx，那么您可能可以先运行该函数，然后将其放置在 routes 元素属性中。您的 AuthGuard 功能也可以大大简化。像这样：

import Dashboard from './Dashboard'

const AuthGuard = (Component) => (props) => {
  const user = firebase.auth().currentUser;
  console.log("USER:: ", user);

  return user ? <Component {...props} /> : <Navigate to="/" />;
}

const Dash = AuthGuard(Dashboard)

<Route path="/dashboard" element={<Dash />} />

或者您可以在导出之前将仪表板包装在您的AuthGuard 中：

export default AuthGuard(Dashboard)

但是，如果您想将 AuthGuard 放置在路由的 element 属性中，则必须将其设为组件，以便您可以像这样包装受保护的组件：

<Route path="/dashboard" element={<AuthGuard><Dashboard /></AuthGuard>)} />

然后您的 AuthGuard 组件将如下所示：

const AuthGuard = ({children}) => {
  const user = firebase.auth().currentUser;
  console.log("USER:: ", user);

  return user ? children : <Navigate to="/" />;
}

或者您可以执行以下操作并将组件作为道具传递。

const AuthGuard = ({Component}) => {
  const user = firebase.auth().currentUser;
  console.log("USER:: ", user);

  return user ? Component : <Navigate to="/" />;
}

<Route path='/dashboard' element={<AuthGuard Component={<Dashboard />} />}/>

【讨论】：