[React] useNavigate 슬래시 유무에 따른 차이 (React Router v6)

[React] useNavigate 슬래시 유무에 따른 차이 (React Router v6)

 

개인 프로젝트를 하다가 발견한 useNavigate 슬래시 유무에 따른 차이를 기록해보려 한다.

로그인 페이지에서 '회원가입' 버튼을 누르면 회원가입 페이지로 이동하도록 구현해야 했다.

로그인 페이지는 /login, 회원가입 페이지는 /join에 존재했다.

 

App.js

 

function LoginPage() {
  const navigate = useNavigate();

  return (
    <Container>
      ...
      <JoinButton onClick={() => navigate('join')} /> {/* 1 */}
      <JoinButton onClick={() => navigate('/join')} /> {/* 2 */}
    </Container>
  );
}

1번과 같이 설정할 경우 도메인 뒤에 '/join'이 추가로 붙는다.

2번과 같이 설정할 경우 도메인 뒤에 있던 file path들이 사라진 후 '/join'이 붙는다.

 

1번 / 2번

간단한 기록 끝!