porting a functional Component to Class based Component

Question

I need to convert this functional based Component to class based Component and create a PrivateAuth Component . Here is the PrivateAuth functional Component .

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.

Answer 1

  // 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} />