Creating PrivateRoute with 'component' prop instead of 'render' prop - reactjs

Question

const PrivateRoute = ({ component, ...rest }) => {
return (
<Route
{...rest}
// OPTION 1
component={!loggedInUser ? <Redirect to="/login" /> : component}
// OPTION 2
render={()=>(!loggedInUser ? <Redirect to="/login" /> : component())}
/>
);
};
Which of the above do you prefer and why? I found that I wasn't able to use the new useParam() hook with OPTION 2 because it told me I was using a hook outside of a functional component body.

Answer 1

here is a good route gate that supports component, render, permission and redirect in case of missing the permission
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;
an example of using it with the component:
<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
/>
an example of it with the render:
<RouteGate
path={paths.profile}
render={() => <Profile />}
hasPermission={isLoggedIn}
redirectTo={paths.login}
/>