Javascript 突出显示物料界面的当前路径'；面包屑

我的代码中有一个breadcrumb组件，但是当前当我单击导航到另一个页面时，breadcrumb默认为“合同详细信息”，显然这是由于我正在使用的排版，但是我不完全确定如何转换代码以突出显示我的当前路径

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

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/>
    )
);
};

constyles=theme=>({
呼吸口水：{
为内容辩护：“中心”，
flexWrap:“wrap”，
},
面包纸：{
填充：`${theme.spating.unit}px${theme.spating.unit*2}px`，
},
});
常量面包屑=道具=>{
const{classes，authenticated}=props；
返回(
认证(
家
合同
合同细节
) : (
)
);
};

查看中的“定制面包屑”示例。用途：来自“@material ui/core/Chip”的芯片；并在样式“&:active”中使用：{boxShadow:theme.shadows[1]，backgroundColor:emphasis（theme.palete.grey[300]，0.12），}和CustomBreadcrumblook本例中的“Customized breadcrumbs”。用途：来自“@material ui/core/Chip”的芯片；并在样式“&:active”中使用：{boxShadow:theme.shadows[1]，backgroundColor:emphasis（theme.palete.grey[300]，0.12），}和CustomBreadcrumb