Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 61x 61x 50x 50x 32x 18x 10x 8x | // See https://github.com/ReactTraining/react-router/issues/1147
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import MuiLink from '@material-ui/core/Link';
import makeStyles from '@material-ui/core/styles/makeStyles';
import OpenInNewRoundedIcon from '@material-ui/icons/OpenInNewRounded';
const useStyles = makeStyles({
icon: {
height: '0.875rem',
'& svg': {
transform: 'translateY(4px)',
},
},
muiLink: {
textDecoration: 'underline',
},
});
const Link = ({ to, children, ...props }) => {
const classes = useStyles();
// If it has no 'to', just style it like a link
if (!to) {
return (
<MuiLink {...props} className={classes.muiLink}>
{children}
</MuiLink>
);
}
// If 'to' is an external link, include icon
if (/^https?:\/\//.test(to)) {
return (
<a href={to} className={classes.icon} {...props}>
{children} <OpenInNewRoundedIcon fontSize='inherit' />
</a>
);
}
// Else assume 'to' is a route
return (
<RouterLink to={to} {...props}>
{children}
</RouterLink>
);
};
export default Link;
|