CODEWITHSUNDEEP
reactjs
MontaKr
MontaKr

Reputation: 155

If I press the button, I want to move the link, what should I do?

I made code and if login information of my code matches well or not, it shows alert window. This worked well. But I want to make it move to new page when login matches well by using Link. So I changed the code when login information matches well. But I can't move the page when I press the button. I think the way to use Link is wrong. Can you guys teach me how to fix it? Thank you.

I skipped useless codes and styled-components

//login information

const User = {
  email : '[email protected]',
  pw : '1234'
}

function LoginForm() {

  const [email, setEmail] = useState ('');
  const [pw, setPw] = useState('');

  const handleEmail = (e) => {
    setEmail(e.target.value); 
  }

  const handlePw = (e) => { 
    setPw(e.target.value); 
  }

  const onClickConfirmButton = (e) => {
    // when information matches well. I think this part has an error

    if(email === User.email && pw === User.pw) {
      <Link to="/lecture" style={{textDecoration : 'none'}} />
    }
    
    //when information is wrong

    else {
      alert('등록되지 않은 회원입니다.')
    }
  }

  return (
    <div>
      <AuthFormBlock>
        <StyledInput 
          placeholder='이메일' 
          value={email}
          onChange={handleEmail}>
        </StyledInput>
        <StyledInput 
          placeholder='비밀번호' 
          type="password" 
          value={pw}
          onChange={handlePw}>
        </StyledInput>
        
        <LoginButton 
          onClick={onClickConfirmButton}>
          로그인
        </LoginButton>
      </AuthFormBlock>
    </div>
  )
}

export default LoginForm;

Upvotes: 0

Views: 31

Answers (1)

Harsh Kanjariya
Harsh Kanjariya

Reputation: 543

Link component is used like anchor tag of html so if you want to change the page programmatically you can use 'useNavigation' hook :

function LoginForm() {

  const [email, setEmail] = useState ('');
  const [pw, setPw] = useState('');

  const navigate = useNavigate();

  const handleEmail = (e) => {
    setEmail(e.target.value); 
  }

  const handlePw = (e) => { 
    setPw(e.target.value); 
  }

  const onClickConfirmButton = (e) => {
    // when information matches well. I think this part has an error

    if(email === User.email && pw === User.pw) {
      navigate('/lecture');
    }
    
    //when information is wrong

    else {
      ...
    }
  }

Upvotes: 1

Related Questions