高阶组件抛出无效的react元素错误（reactjs）

因此，我最近一直在阅读有关HOC的内容，并决定在我的应用程序中使用它们来将授权逻辑传递给子组件

我试图通过HOC渲染

组件，但它记录了错误：

未捕获错误：AuthRoute（…）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

以下是HOC的代码：

const AuthRoute = ({ component: Component }) => {
  class AuthComponent extends Component {
    // Authorisation logic here
    render() {
      return (
          <Route render={props => <Component {...props}/>} />
      )
    }
  }
  return AuthComponent;
};

const AuthRoute=（{component:component}）=>{
类AuthComponent扩展组件{
//这里的授权逻辑
render（）{
返回(
} />
)
}
}
返回组件；
};

然后我使用这个HOC作为

组件的别名，如下所示：

<BrowserRouter>
  <AuthRoute path="/account" component={PrivateComponent} />
</BrowserRouter>

编辑：

但这种方法很管用：

const AuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      checkAuth() ? (<Component {...props}/>) : (<Redirect to={{pathname: '/', state: { from: props.location }}}/>)
    )}/>
);

<BrowserRouter>
  <AuthRoute path="/account" component={PrivateComponent} />
</BrowserRouter>

constauthroute=（{component:component，…rest}）=>(
(
checkAuth（）？（）：（）
)}/>
);

您需要检查您的体系结构。事实上，关于HOC模式，您的方法是完全矛盾的。您可能需要执行以下操作：

<BrowserRouter>
  <Route path="/account" component={AuthRoute(PrivateComponent)} />
</BrowserRouter>

如果您同意这种调用HOC的设计，则HOC实现将是：

const AuthRoute = (Composed) => {
  class AuthComponent extends React.Component {
    // Authorisation logic here
    componentWillMount() {
       if (!checkAuth()) {
         this.props.history.push({pathname: '/', state: { from: this.props.location }});
       }
    }

    render() {
      return (
          <Composed {...this.props} />
      )
    }
  }
  return AuthComponent;
};

const AuthRoute=（组合）=>{
类AuthComponent扩展了React.Component{
//这里的授权逻辑
组件willmount（）{
如果（！checkAuth（））{
this.props.history.push（{pathname:'/'，state:{from:this.props.location}）；
}
}
render（）{
返回(
)
}
}
返回组件；
};

您需要检查您的体系结构。事实上，关于HOC模式，您的方法是完全矛盾的。您可能需要执行以下操作：

<BrowserRouter>
  <Route path="/account" component={AuthRoute(PrivateComponent)} />
</BrowserRouter>

如果您同意这种调用HOC的设计，则HOC实现将是：

const AuthRoute = (Composed) => {
  class AuthComponent extends React.Component {
    // Authorisation logic here
    componentWillMount() {
       if (!checkAuth()) {
         this.props.history.push({pathname: '/', state: { from: this.props.location }});
       }
    }

    render() {
      return (
          <Composed {...this.props} />
      )
    }
  }
  return AuthComponent;
};

const AuthRoute=（组合）=>{
类AuthComponent扩展了React.Component{
//这里的授权逻辑
组件willmount（）{
如果（！checkAuth（））{
this.props.history.push（{pathname:'/'，state:{from:this.props.location}）；
}
}
render（）{
返回(
)
}
}
返回组件；
};

我不太熟悉您编写的语法。但我发现了一件事。您的参数是component，但在您的内部使用的是component，在本上下文中它是未定义的

我不太熟悉您编写的语法。但我发现了一件事。您的参数是component，但在您的内部使用的是component，在本上下文中未定义它应该是：

const AuthRoute = (Component ) => { // <-- Component which refers to PrivateComponent
  class AuthComponent extends React.Component {  // <-- React.Component
     ....       

此外，您还可以选择购买雅致的HOC。

它应该是：

const AuthRoute = (Component ) => { // <-- Component which refers to PrivateComponent
  class AuthComponent extends React.Component {  // <-- React.Component
     ....       

---

另外，请检查是否有优雅的HOC。

在第一种情况下，您将返回一个类实例

const AuthRoute = ({ component: Component }) => {
  class AuthComponent extends Component {         
    // Authorisation logic here
    render() {
      return (
          <Route render={props => <Component {...props}/>} />
      )
    }
  }
  return AuthComponent;  // returning the class object here and not an instance 
};

因此

---

使用

，您调用了一个组件实例，功能组件通过该实例接收props

path

和

component

。

在第一种情况下，您返回的是一个类实例

const AuthRoute = ({ component: Component }) => {
  class AuthComponent extends Component {         
    // Authorisation logic here
    render() {
      return (
          <Route render={props => <Component {...props}/>} />
      )
    }
  }
  return AuthComponent;  // returning the class object here and not an instance 
};

因此

---

使用

，您调用了一个组件实例，功能组件通过该实例接收道具

path

和

component

。

实际上不是未定义的，而是React.component实际上不是未定义的，而是React.component这看起来更熟悉：）@Abdennour您能解释一下我的方法在这方面是如何完全矛盾的吗我对问题所做的编辑？当然@m-ketan！我看到了你的更新，这就是为什么我也更新了我的答案；查看

componentWillMount

这看起来更熟悉：）@Abdennour你能解释一下我的方法与我对问题所做的编辑完全矛盾吗？当然可以@m-ketan！我看到了你的更新，这就是为什么我也更新了我的答案；查看

组件willmount

感谢您的解释。很高兴它帮助您理解。感谢您的解释。很高兴它帮助您理解