html - 按钮仅在仪表板路线上出现?
问题描述
我在导航栏上有一个按钮,该导航栏将出现在所有屏幕上。但是,我希望该按钮仅出现在仪表板屏幕上。
目前,路由是通过 react-router-dom 完成的
该按钮是<Button>Últimos 30 dias</Button>
HTML:
export default function NavBar() {
return (
<Box>
<NavBarLeft>
<Hamburger>
<MenuIcon style={{ color: "#0ed39c", fontSize: "30px" }} />
</Hamburger>
<Button>Últimos 30 dias</Button>
</NavBarLeft>
<Profile />
</Box>
);
}
CSS:
export const Box = styled.div`
padding-left: 30px;
padding-right: 30px;
height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
box-shadow: 0 4px 16px rgba(69, 91, 99, 0.06);
`;
export const NavBarLeft = styled.div`
display: flex;
align-items: center;
`;
export const Hamburger = styled.div`
margin-right: 30px;
`;
export const Button = styled.button`
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 4px;
padding-left: 15px;
padding-right: 15px;
height: 44px;
border-radius: 10px;
border: 1px solid ${props => props.theme.colors.marketplace};
font-size: 18px;
line-height: 22px;
color: ${props => props.theme.colors.marketplace};
`;
解决方案
你可以这样做。
import { useLocation } from 'react-router-dom';
export default function NavBar() {
const location = useLocation();
return (
<Box>
<NavBarLeft>
<Hamburger>
<MenuIcon style={{ color: "#0ed39c", fontSize: "30px" }} />
</Hamburger>
{ location.path === '/dashboard' && <Button>Últimos 30 dias</Button> }
</NavBarLeft>
<Profile />
</Box>
);
}
推荐阅读
- javascript - 用户输入和 toFixed 方法不起作用
- rust - 一次不能多次借用 `reader` 作为 mutable
- python - 如何通过 python 中我的不和谐机器人的单独函数发送消息?
- c# - 将内存流转换为数组,但只取指定数量的元素
- c# - 添加新项目时列表重置(编辑标题以反映实际问题)
- cmake - cmake:当有d后缀进行调试时如何链接dll
- c - 在用户正确输入后执行while循环继续循环
- gstreamer - 使用 gstreamer 图像失真
- object-detection - 关于 YOLO 向量值
- excel - 为什么 AdvancedFilter 会停用所有表格标题下拉按钮?