Кнопка появляется только когда на приборной панели маршрут?

Question

У меня есть кнопка на панели навигации, которая отображается на всех экранах. Тем не менее, я бы хотел, чтобы кнопка появлялась только на экране панели инструментов.

В настоящее время маршруты выполняются с помощью activ-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};
`;

Answer 1

Вы можете сделать это так.

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