<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
This Pen doesn't use any external CSS resources.