Reactjs 要转换为ES6类版本的专用路由功能代码，用于react redux

您好，我有一个从教程复制的文件，我想将其转换为ES6类表示法，但我不理解函数声明的语法

函数PrivateRoute（{component:component，…rest}）

这是完整的代码。我想更改它的原因是我想使用react-redux-connect-HOC，我可以了解如何使用它的当前语法

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“/context/auth”导入{useAuth}；
函数privaterout（{component:component，…rest}）{
const{authTokens}=useAuth（）；
返回(
代币(
) : (
)
}
/>
);
}
导出默认私有路由；

我想要这样的东西，但我知道这是不对的

从“React”导入React；
从“react redux”导入{connect}；
从“react router dom”导入{Route，Redirect}；
类PrivateRoute扩展了React.Component{
render（）{
if（this.props.authTokens）{
返回{this.props.children}；
}否则{
返回(
);
}
}
}
常量mapStateToProps=（状态）=>{
返回{
authTokens:state.authTokens，
};
};
导出默认连接（MapStateTops，null）（PrivateRoute）；

---

提前谢谢。

如果让我猜猜看代码的话，我想你忘了把剩下的道具分散到

路线

组件中。因此，

路径

和其他道具可以通过

路由

组件

class PrivateRoute extends React.Component {
  render() {
    const { authTokens, children, location, ...rest } = this.props;
    if (authTokens) {
      return <Route {...rest}>{children}</Route>;
    } else {
      return (
        <Redirect
          to={{ pathname: "/login", state: { referer: location } }}
        />
      );
    }
  }
}

component

已被解构并重命名为

component

其余的道具分散到一个新对象中

rest

---

功能组件不工作吗？为什么要回到基于类的组件？你已经试过了，但有些东西不起作用了吗？你有什么问题？看起来你忘了把剩下的道具分散到

路由中了。谢谢你，我现在不能测试这个，因为我还有其他错误，我的应用程序中的react redux没有更新状态，但这帮助我理解如何从functional转换到ES6类。我会尽快更新。谢谢你的解释。我更喜欢ES6语法，因为我是java开发人员，更熟悉类语法。还不确定如何在react redux connect中包装函数。我的应用程序存在与此解决方案无关的错误，因此我创建了一个虚拟应用程序来测试您的答案，它工作正常。再次感谢。@Amir ES6作为标准应用于所有javascript。使用函数定义React组件是React特有的。React已经转向功能组件和挂钩，但仍然支持基于类的组件。react redux
connect
是一个组件，因此它同样装饰了功能组件和基于类的组件。如果你觉得我的回答和解释很有帮助，那么请不要忘记投票。干杯
function PrivateRoute(props) {
  const { component: Component, ...rest } = props;