How can I write it as a class component

Question

I found this functional component example over internet. How can I write it as a class component. I have lost in parameters.

import React from 'react'
import { Route, Redirect } from 'react-router-dom';
import auth from '../_helpers/auth'


const PrivateRoute = ({ component: Component, ...rest }) => {

    return (
        <Route {...rest} render={props => {

            if (auth.isAuthenticated) {
                return <Component {...props} />
            } else {
                return <Redirect to={
                    {
                        pathname: '/public',
                        state:
                        {
                            from: this.props.location
                        }
                    }} />
            }
        }}
        />
    );
}

Answer 1

I can see etarhan has already provided correct answer, but I just want to mention something about making your code cleaner, and thus, more maintainable and readable. Please, I highly recommend separating your logic you have.

I see you wrote above:

I have lost in parameters.

And I'm not surprised. I was lost too! I would recommend separating the logic out a bit more. Also you do not need and else statement return as if it's not the first if it has to be the else, so we can just return what in the else block. So this is how I separated your code.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

import auth from '../_helpers/auth';

class PrivateRoute extends React.Component {
  getComponent = () => {
    const { component: Component, location } = this.props;

    if (auth.isAuthenticated) {
      return (
        <Component {...this.props} />
      );
    }

    return (
      <Redirect
        to={{
          pathname: '/public',
          state: {
            from: location,
          },
        }}
      />
    );
  }

  render() {
    const { ...rest } = this.props;

    return (
      <Route {...rest} render={this.getComponent()} />
    );
  }
}

As Robert C. Martin stated in his book Clean Code: A Handbook of Agile Software Craftsmanship (highly recommend).

“Clean code is code that has been taken care of. Someone has taken the time to keep it simple and orderly. They have paid appropriate attention to details. They have cared.”

Answer 2

You can rewrite the PrivateRoute functional component as a class by doing the following:

class PrivateRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props;
    return (
      <Route {...rest} render={props => {

        if (auth.isAuthenticated) {
          return <Component {...props} />
        } else {
          return <Redirect to={
            {
              pathname: '/public',
              state:
              {
                from: props.location
              }
            }} />
        }
      }}
      />
    );
  }
}