나루토
295
2022-05-31 11:10:54
1
114

리액트 네비바 클릭이 씹히는 문제


아래와 같은 코드를 짰는데 클릭이 한번에 안먹히거나 씹히는 경우가 자주 생기는데

왜이러는 건가요?!ㅠㅠㅠ

import { useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

export default function NavBar() {
  const [currentNav, setCurrentNav] = useState(1);
  console.log(currentNav);
  return (
    <>
      <Nav>
        <NavList>
          <li className={currentNav === 1 ? "on" : ""}>
            <Link to="/home" onClick={() => setCurrentNav(1)}>
              <div>
                <span className="blind">홈</span>
              </div>
            </Link>
          </li>
          <li className={currentNav === 2 ? "on" : ""}>
            <Link to="/home" onClick={() => setCurrentNav(2)}>
              <div>
                <span className="blind">메뉴</span>
              </div>
            </Link>
          </li>
          <li className={currentNav === 3 ? "on" : ""}>
            <Link to="/time" onClick={() => setCurrentNav(3)}>
              <div>
                <span className="blind">검색</span>
              </div>
            </Link>
          </li>
          <li className={currentNav === 4 ? "on" : ""}>
            <Link to="/home" onClick={() => setCurrentNav(4)}>
              <div>
                <span className="blind">돋보기</span>
              </div>
            </Link>
          </li>
        </NavList>
      </Nav>
    </>
  );
}

const Nav = styled.nav`
  z-index: 160;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  height: 14.4rem;
  padding: 2rem 8rem 0;
  border-top-right-radius: 4rem;
  border-top-left-radius: 4rem;
  background-color: #191919;
`;
const NavList = styled.ul`
  display: flex;
  justify-content: space-between;
  li {
    width: 7.2rem;
    height: 7.2rem;
    background-repeat: no-repeat;
    background-position: center;
    :first-child {
      background-image: url("/image/ico_nav_home_off.png");
      background-size: 7.2rem;
    }
    :nth-child(2) {
      background-image: url("/image/ico_nav_calendar_off.png");
      background-size: 7.2rem;
    }
    :nth-child(3) {
      background-image: url("/image/ico_nav_bus_off.png");
      background-size: 8rem;
    }
    :last-child {
      background-image: url("/image/ico_nav_setting_off.png");
      background-size: 6.4rem;
    }
    :first-child.on {
      background-image: url("/image/ico_nav_home_on.png");
      background-size: 7.2rem;
    }
    :nth-child(2).on {
      background-image: url("/image/ico_nav_calendar_on.png");
      background-size: 7.2rem;
    }
    :nth-child(3).on {
      background-image: url("/image/ico_nav_bus_on.png");
      background-size: 8rem;
    }
    :last-child.on {
      background-image: url("/image/ico_nav_setting_on.png");
      background-size: 6.4rem;
    }
    div {
      display: block;
      height: 100%;
    }
  }
`;


0
  • 답변 1

  • zhaogo
    258
    2022-05-31 11:50:16

    라우터랑 onClick 이벤트랑 겹쳐서 그런거 아닐까요~???

  • 로그인을 하시면 답변을 등록할 수 있습니다.