Enabling routes with Role-based auth

app.js

/* Snippet */
render() {
        const { roles, username } = this.state;
        const userObject = { username, roles };
        return (
            <UserContext.Provider value={ userObject }>
                <Sidebar />
                <EnabledRoute name='dashboard' exact component={ Dashboard } />
                <EnabledRoute name='admin' exact component={ Admin } />
                <EnabledRoute name='units' exact component={ Units } />
            </UserContext.Provider>
        );
    }

EnabledRoute.js

import React, { useContext} from 'react';
import { useRouteMatch } from 'react-router-dom';

import UserContext from '../context/UserContext';
import routes from './routes';

const EnabledRoute = (props) => {
    const { roles } = useContext(UserContext);
    const { name, exact, component: Component } = props;
    const { role, route: path } = routes.find(route => route.name === name);
    const match = useRouteMatch({ path, exact });
    return match && roles.includes(role) && <Component />;
};

export default EnabledRoute;

routes.js

import React from 'react';

const routes = [
    {
        name: 'admin',
        label: 'Admin',
        role: 'ROLE_ADMIN',
        route: '/admin'
    },
    {
        name: 'units',
        label: 'Units',
        role: 'ROLE_UNITS',
        route: '/units'
    }
];

export default routes;