<Link>

• react-router-dom이 제공하는 컴포넌트

• <Link> 태그는 <a>태그를 생성하기 때문에 웹사이트가 크롤링되어 SEO에 유리

• <a>태그와 달리 페이지를 새로고침하지 않고 이동이 가능

• 다른 연산과정 없이 프로젝트 내에서 페이지를 이동할 때 사용

  <Link href="/about"><a>About me</a></Link>
  

<a>

• 순수 HTML 요소로, 사용자를 새 페이지의 URL로 이동시키는 하이퍼링크를 생성

• 이동할 때, 페이지가 새로고침됨

• 외부 프로젝트와 연결 할 때 주로 사용

  <a href="/about">About me</a>
  

useNavigate

• react-router-dom이 제공하는 훅
• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환
• 반환하는 함수를 navigate변수에 저장 후, navigate()의 인자로 path값을 넘겨주면 해당 경로로 이동
• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 사용

import {useNavigate} from 'react-router-dom';
const Main = () => {
	const navigate = useNavigate();
	...
	return (
		<button onClick={() => {navigate("/about")}}>about</button>
	)
}

import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom';

function PostDetail() {
  const location = useLocation();
  const navigate = useNavigate();
  const { post } = location.state ? location.state : { post:'' }

  if (!post) return <p>Not Found</p>return (
    <div>
        { post.title }
        { post.body }
        <button 
					onClick={() => navigate("/users", 
						{replace: true, state: {data: 1}}
					)}
				>
				유저페이지로 이동
				</button>
    </div>
  )
}
export default PostDetail