react router navlink Как сделать некликабельной. Блокировка, неактивный элемент

Определим собственный компонент на базе ссылки из react route:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import {NavLink } from 'react-router-dom';

function СontrolledNavLink(props) {
    const { classes, children, blocked, onClick, ...rest } = props;

    const handleClick = blocked ? (e) => {
        e.preventDefault();
    } : onClick;


    return (
        <NavLink
            {...rest}
            onClick={handleClick}
        >
            {children}
        </NavLink>
    )
}

СontrolledNavLink.propTypes = {
    blocked: PropTypes.bool,
};

const styles = props => ({});

export default withStyles(styles)(СontrolledNavLink);

-- тут ожидается необязательный пропс blocked, т.е. использовать компонент можно, например так:

import СontrolledNavLink from './СontrolledNavLink';

// ..................

<СontrolledNavLink
	blocked={true}
	to={RoutePath(route)}
	className={classes.link}
	key={id}
	activeClassName={classes.itemActiveItem}>

	<ListItem
	  button
	  className={clsx(classes.item)}
	  id={getFullId(id)}
	>
	  <ListItemText
		classes={{
		  primary: classes.itemPrimary,
		}}
		className={addClassNames}
	  >
		<span className={addClassNames}>{name}</span>
	  </ListItemText>

	</ListItem>
 </СontrolledNavLink>

На базе идеи: https://stackoverflow.com/questions/4929...