Reactjs 类构造函数不能在没有'；新'；返回时<；组件/>；

我有下面的代码

   <ProtectedRoute path='/u/MyDashboard' component={DashboardPage} />

看起来像这样

export default function ProtectedRoute(props) {

    var [state, statesetter] = useState({ isAuthenticated:false });
    var [dataloaded, loadingsetter] = useState(false);
    useEffect(() => {
       
        statesetter({ isAuthenticated: true });
        loadingsetter(true);
    }, []);

    return (
        dataloaded == true ?
            <Route
                
                render={boo => (
                    state["isAuthenticated"] == true ?
                        <Component  { ...props } /> :
                        <Redirect to={'/login'} />

            )}
            /> :
            <LoadingSpinner></LoadingSpinner>

    )}

导出默认函数ProtectedRoute（props）{
var[state，statesetter]=useState（{isAuthenticated:false}）；
var[dataloaded，loadingsetter]=useState（false）；
useffect（（）=>{
statesetter（{isAuthenticated:true}）；
装载机（正确）；
}, []);
返回(
dataloaded==真？
(
状态[“isAuthenticated”]==真？
:
)}
/> :
)}

---

当它返回

时，我得到以下错误：

类构造函数仪表板页面不能在没有“new”的情况下调用。

。如何在component标记中新建类，或者如何修复此问题？

我认为您缺少将

组件

属性转换为

组件

以进行渲染。解构props对象并重命名

组件

，然后将其余部分展开

export default function ProtectedRoute({ component: Component, ...props }) {
  const [state, statesetter] = useState({ isAuthenticated: false });
  const [dataloaded, loadingsetter] = useState(false);

  useEffect(() => {
    statesetter({ isAuthenticated: true });
    loadingsetter(true);
  }, []);

  return dataloaded ? (
    <Route
      render={(routeProps) =>
        state.isAuthenticated ? (
          <Component {...props} {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  ) : (
    <LoadingSpinner></LoadingSpinner>
  );
}

导出默认函数ProtectedRoute（{component:component，…props}）{
const[state，statesetter]=useState（{isAuthenticated:false}）；
const[dataloaded，loadingsetter]=useState（false）；
useffect（（）=>{
statesetter（{isAuthenticated:true}）；
装载机（正确）；
}, []);
返回已加载的数据(
州。是否已认证(
) : (
)
}
/>
) : (
);
}