[React] Navigation 만들기 (2) - Link 컴포넌트 만들기

- src/component/Link.js

import { useContext } from "react";
import NavigationContext from "../context/navigation";

function Link({ to, children }){

  const {navigate} = useContext(NavigationContext);
  const handleClick = (event) => {
    event.preventDefault();
    navigate(to);
  }
  return <a onClick={handleClick}>{children}</a>
}

export default Link;

 

코드는 간단하다. 우선 NavigationContext에서 currentPath는 무시하고 navigate 함수만 가져온다.

그리고 a태그를 클릭했을때 navigate로 이동하게 한다. 그럼 Link는 어디서 사용하나?

App.js에서 사용한다!

 

 

- App.js

import Link from "./component/Link";

function App() {    
    return (
        <div>
            <Link to="/main">**Go To Main**</Link>
            <Link to="/signup">**Go To Signup**</Link>
        </div>
    )
}
export default App;

Link컴포넌트를 import한 다음에 속성으로는 to로 경로를 입력한다.

Link 태그 사이에 있는 텍스트가 children이 된다.

 

그럼

최초 url

Go To Main 클릭했을 때

Go To Signup 클릭했을 때

이렇게 pathname이 바뀌게 된다!! 굿@!@!