[英]porting a functional Component to Class based Component
I need to convert this functional based Component to class based Component and create a PrivateAuth Component . 我需要将此基于功能的Component转换为基于类的Component并创建一个PrivateAuth Component。 Here is the PrivateAuth functional Component .
这是PrivateAuth功能组件。
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
and here is the class based Component that I tried . 这是我尝试过的基于类的组件。
class PrivateRoute extends React.Component{
render(){
console.log('this.props',this.props);
const{ component: Component, ...rest } =this.props;
return(
<Route
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
}
I strated getting the error Maximum update depth exceeded. 我试图得到错误超过最大更新深度。
// don't spread rest here
const{ component: Component, rest } =this.props;
<Route
// and you can here spread rest like before
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.