React HOC 抛出 React.createElement：类型无效

Question

This seems to be working with class based components but i thought of implementing functional components which kind of gave me the error, I tried checking all the question in SO but couldn't find the correct approach. I may be missing something here, help needed.

My Components BackendRootComponent

import React,{useEffect} from 'react'
import { HeaderComponent } from './layouts/HeaderComponent';
import { isMobile, isTablet } from 'react-device-detect';
export default function BackendRootComponent(BaseComponent){
    useEffect(() => {
        require('./sass/main.scss');
        if(isMobile || isTablet) $("body").addClass("mobile-adjustment");
    },[])
    return(
        <>
            <HeaderComponent/>
            <main className="content pt-3">
                <BaseComponent/>
            </main>
        </>
    )
}

ProtectedRoute.js

import React from 'react';
import {Redirect,Route} from 'react-router-dom';
import BackendRootComponent from '../backend/BackendRootComponent';
export default function ProtectedRoute ({component: Component,isAuthenticated, ...rest}) {
    let AdminRootComp = BackendRootComponent(Component)
    return (
        <Route  {...rest}   render={(props) => isAuthenticated === true
                ? <AdminRootComp {...props}/>
                : <Redirect to={
                    {
                        pathname: '/backend-admin/login', 
                        state: {
                            from: props.location
                        }
                    }
                } />
            }
        />
    )
}

RouterComponent.js

import React from 'react';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
import RootComponent from '../frontend/RootComponent';
import IndexComponent from '../frontend/components/IndexComponent';
import ContactComponent from '../frontend/components/ContactComponent';
import WorkComponent from '../frontend/components/WorkComponent';
import AboutComponent from '../frontend/components/AboutComponent';
import ErrorComponent from '../frontend/components/ErrorComponent';
import BlogComponent from '../frontend/components/BlogComponent';
/* backend components */
import BackendRootComponent from '../backend/BackendRootComponent';
import LoginComponent from '../backend/components/Auth/LoginComponent';
import RegisterComponent from '../backend/components/Auth/RegisterComponent';
import UpdateInfoFunctionComponent from '../backend/components/UpdateInfoFunctionComponent';
import UpdateHomeFunctionComponent from '../backend/components/UpdateHomeFunctionComponent';
import WorkIndexComponent from '../backend/presentation/WorkIndexComponent';
import UpdateWorkFunctionComponent from '../backend/components/UpdateWorkFunctionComponent';
import AddWorkFunctionComponent from '../backend/components/AddWorkFunctionComponent';
import BlogIndexComponent from '../backend/presentation/BlogIndexComponent';
import UpdateBlogFunctionComponent from '../backend/components/UpdateBlogFunctionComponent';
import AddBlogFunctionComponent from '../backend/components/AddBlogFunctionComponent';
import UpdateAboutFunctionComponent from '../backend/components/UpdateAboutFunctionComponent';
import MetaIndexComponent from '../backend/presentation/MetaIndexComponent';
import AddMetaFunctionComponent from '../backend/components/AddMetaFunctionComponent';
import UpdateMetaFunctionComponent from '../backend/components/UpdateMetaFunctionComponent';
import ProtectedRoute from './ProtectedRoute';

function RouterComponent() {
    let appState = localStorage.getItem('appState')
    let loggedIn = (appState) ? JSON.parse(appState).isLoggedIn : false;
  return (
    <Router basename={'/'}>
      <Switch>
        <Route path="/" exact component={(props) => RootComponent(IndexComponent,props)}/>
        <Route path="/about" exact component={(props) => RootComponent(AboutComponent,props)}/>
        <Route path="/work" exact component={(props) => RootComponent(WorkComponent,props)}/>
        <Route path="/blog" exact component={(props) => RootComponent(BlogComponent,props)}/>
        <Route path="/contact/:hire?" exact component={(props) => RootComponent(ContactComponent,props)}/>
        {/* backend routes */}
                {<ProtectedRoute isAuthenticated={loggedIn} path='/backend-admin/info' component={UpdateInfoFunctionComponent} />}
        {/* <Route path="/backend-admin/info" exact component={(props) => BackendRootComponent(UpdateInfoFunctionComponent,props)}/> */}
        <Route path="/backend-admin/home" exact component={(props) => BackendRootComponent(UpdateHomeFunctionComponent,props)}/>
        <Route path="/backend-admin/about" exact component={(props) => BackendRootComponent(UpdateAboutFunctionComponent,props)}/>
        <Route path="/backend-admin/work" exact component={(props) => BackendRootComponent(WorkIndexComponent,props)}/>
        <Route path="/backend-admin/work/edit/:id" exact component={(props) => BackendRootComponent(UpdateWorkFunctionComponent,props)}/>
        <Route path="/backend-admin/work/add" exact component={(props) => BackendRootComponent(AddWorkFunctionComponent,props)}/>
        <Route path="/backend-admin/blog" exact component={(props) => BackendRootComponent(BlogIndexComponent,props)}/>
        <Route path="/backend-admin/blog/edit/:id" exact component={(props) => BackendRootComponent(UpdateBlogFunctionComponent,props)}/>
        <Route path="/backend-admin/blog/add" exact component={(props) => BackendRootComponent(AddBlogFunctionComponent,props)}/>
        <Route path="/backend-admin/meta" exact component={(props) => BackendRootComponent(MetaIndexComponent,props)}/>
        <Route path="/backend-admin/meta/edit/:id" exact component={(props) => BackendRootComponent(UpdateMetaFunctionComponent,props)}/>
        <Route path="/backend-admin/meta/add" exact component={(props) => BackendRootComponent(AddMetaFunctionComponent,props)}/>
        <Route path="/backend-admin/register" exact component={(props) => BackendRootComponent(RegisterComponent,props)}/>
        <Route path="/backend-admin/login" exact component={(props) => BackendRootComponent(LoginComponent,props)}/>
        <Route component={(props) => RootComponent(ErrorComponent,props)}/>
      </Switch>
    </Router>
  );
}

export default RouterComponent;

If i remove BackendRoot HOC everything works fine, but with HOC i get the errror.

Answer 1

If you need your BackendRootComponent be an HOC, try prefixing it with with and take in props as well.

Try the below implementation:

import React,{useEffect} from 'react'
import { HeaderComponent } from './layouts/HeaderComponent';
import { isMobile, isTablet } from 'react-device-detect';
const withBackendRootComponent = BaseComponent => props => {
    useEffect(() => {
        require('./sass/main.scss');
        if(isMobile || isTablet) $("body").addClass("mobile-adjustment");
    },[])
    return(
        <>
            <HeaderComponent/>
            <main className="content pt-3">
                <BaseComponent {...props} />
            </main>
        </>
    )
}

Note that, React component names start with a capital letter.