突出显示材料ui面包屑的当前路径

Question

我的代码中包含一个面包屑组件，但是目前，当我单击导航至其他页面时，面包屑默认为“合同详细信息”，这显然是由于我要提供的版式，但是我不确定如何转换代码以突出显示当前路径。

例如，如果我单击“主页”，我希望突出显示“主页”以向用户显示他们的位置，谢谢您的时间

const styles = theme => ({
breadRoot: {
    justifyContent: 'center',
    flexWrap: 'wrap',
},
breadPaper: {
    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
},
});


const BreadCrumb = props => {
const { classes, authenticated } = props;
return (
    authenticated ? (
        <div className={classes.breadRoot}>
            <Paper className={classes.breadPaper}>
                <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="Breadcrumb">
                    <Link color="inherit" href="/">
                     Home
                    </Link>
                    <Link color="inherit" href="/contracts">
                     Contracts
                    </Link>
                    <Typography color="textPrimary">Contract Details</Typography>       
                </Breadcrumbs>
            </Paper>
        </div>
    ) : (
        <div/>
    )
);
};