<div id="app">
  </app>

body {
  background: #333;
  color: white;
}
 
const IS_LOGGED_IN = true;

const PrivatRoute = ({ component: Component = React.Fragment, hasPermission }) => {
  return <>{IS_LOGGED_IN && hasPermission ? <Component /> : <></>}</>;
};

const Dashboard = () => <h2>Can be accessed if user is logged in </h2>;

const Profile = () => <h2>Can't be accessed, as user does not have required permissions </h2>;

const Application = () => {
  return (
    <>
      <PrivatRoute component={Dashboard} hasPermission />
      {/*Profile Route won't be rendered as hasPermission prop is set to false.
Try updating it to true, if want to see the component
*/}
      <PrivatRoute component={Profile} hasPermission={false} />
    </>
  );
};
/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js
  2. https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js