리액트 라우터 Link 사용하기

Route설정은 단순히 사용자가 직접 주소창에 /주소 를 입력하면 해당 주소에 맞는 컴포넌트들을 띄어주는 역할을 한다.

Link와 useNavigate를 사용하면 사용자가 단순히 클릭을 해도 해당 주소로 이동하도록 해준다.

🔍 클릭하면 해당 주소로 이동하도록 하기

import { Link } from "react-router-dom"

function MainHeader() {
  return (
    <header>
        <ul>
            <li>
                <Link to="/welcome">Welcome</Link> //클릭하면 /welcome 페이지로 이동하도록 함
            </li>
            <li>
                <Link to="/products">Products</Link>
            </li>
        </ul>
    </header>
  )
}

export default MainHeader

Link 를 사용하면, 클릭하면 to = 주소에 해당하는 주소로 이동시켜준다.