Как я могу написать это как компонент класса

Question

Я нашел этот пример функционального компонента через Интернет.Как я могу написать это как компонент класса.Я потерял в параметрах.

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

Я вижу, что etarhan уже предоставил правильный ответ, но я просто хочу упомянуть кое-что о том, как сделать ваш код чище, а значит, более удобным и читабельным.Пожалуйста, я настоятельно рекомендую разделить вашу логику.

Я вижу, вы написали выше:

Я потерял в параметрах.

И я не удивлен.Я тоже потерялся!Я бы порекомендовал отделить логику немного больше.Также вам не нужно и оператор else возвращает, как если бы это был не первый if, он имеет в качестве другого, поэтому мы можем просто вернуть то, что в блоке else.Вот как я разделил ваш код.

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()} />
    );
  }
}

Как заявил Роберт С. Мартин в своей книге «Чистый код: руководство по гибкому программному обеспечению» (настоятельно рекомендуется).

«Чистый код - это код, о котором позаботились.Кто-то нашел время, чтобы сохранить его простым и упорядоченным.Они уделили должное внимание деталям.Они позаботились. »

Answer 2

Функциональный компонент PrivateRoute можно переписать как класс, выполнив следующие действия:

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