Создание PrivateRoute с помощью 'component' prop вместо 'render' prop

Question

const PrivateRoute = ({ component, ...rest }) => {
  return (
    <Route
      {...rest}

      // OPTION 1
      component={!loggedInUser ? <Redirect to="/login" /> : component}

      // OPTION 2
      render={()=>(!loggedInUser ? <Redirect to="/login" /> : component())}

    />
  );
};

Что из перечисленного вы предпочитаете и почему? Я обнаружил, что не смог использовать новый хук useParam () с OPTION 2, потому что он сказал мне, что я использую хук вне тела функционального компонента.

Answer 1

Вот хороший маршрутный шлюз, который поддерживает компонент, рендеринг, разрешение и перенаправление в случае отсутствия разрешения

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

/* eslint-disable no-nested-ternary */
const RouteGate = props => {
  const {
    component: Component,
    hasPermission,
    redirectTo,
    render,
    ...rest
  } = props;

  return (
    <Route
      render={() =>
        hasPermission ? (
          Component ? (
            <Component {...props} />
          ) : (
            render()
          )
        ) : (
          <Redirect
            to={{
              pathname: redirectTo,
            }}
          />
        )
      }
      {...rest}
    />
  );
};

RouteGate.propTypes = {
  component: PropTypes.func,
  render: PropTypes.func,
  hasPermission: PropTypes.bool,
  redirectTo: PropTypes.string,
};

RouteGate.defaultProps = {
  hasPermission: true,
  redirectTo: '',
};

export default RouteGate;

пример использования его с компонентом:

<RouteGate
    path={paths.profile} // route of the profile, eg: /profile
    component={Profile} // component of the profile page
    hasPermission={isLoggedIn} // a flag in user selectors
    redirectTo={paths.login} // route of the login page eg: /login
/>

пример этого с рендером:

<RouteGate
    path={paths.profile}
    render={() => <Profile />}
    hasPermission={isLoggedIn}
    redirectTo={paths.login}
/>