Link 태그와 Navigate

link 링크 태그와 Navigate네비게이트

-리액트는 페이지가 이동할 때마다 서버에서 받는 것이 아니라
자바스크립트에서 출력을 해줍니다

• Router? "\" 페이지 경로를 나눠주는 것이 라우터입니다.

• Link 컴포넌트를 이용한 페이지 이동!

리액트 라우터 에서 링크 컴포넌트를 사용하면 내가 원하는 경로 url로 이동

 <Link to="/about">About</Link>

-네비게이트

함수 호출을 통해 페이지를 이동하기 때문에
특정 조건을 충족(조건은 내가 정하는 것) 할 경우에 페이지 이동

왜 리액트에서 네비게이트를 쓰는가?
SPA 페이지기 떄문에 한페이지에 경로를 이동해야 합니다.

  import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
선언해주기 네비게이트
  const goToMain = () => {
   GotoMain선언후  콜백함수 로  어떤이벤트에 의해 호출할 것이다
    navigate("/main");
    네비게이트 <메인으로 이동할것이다>
  };
  // EX)
  // const goToMain = () => {
  //   if(response.message === "valid user"){
  //     navigate('/main');
  //   } else {
  //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  //     navigate('/signup');
  //   }
  // }

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다.먼저 const 변수에 navigate 함수를 저장 합니다.
  Cosnt 변수에 Goto main 콜백함수를 사용해 실행됬을 떄 navigate의 인자로 설정한 path값을(“/main”) 넘겨주면 (괄호) 해당 경로로 이동함

[https://velog.io/@seokkitdo/React-Link-useNavigate] 참고 했습니다 감사합니당