[ReactJS] ReactJS로 영화 웹 서비스 만들기 (18) - Router Link

오늘의 할 일은 Navigation 버튼을 만드는것이다.

먼저 Navigation 이라는 컴포넌트를 생성하자.

 

실행시켜보면 이렇게나온다.

 

하지만 문제가 2개 발생하는데

하나는 홈을 누를 시 다시한번 로딩이 되는점 (새로고침이 되는 점)
다른 하나는 About 페이지가 안먹힌다는 점이다. (href="/about" 이 안먹힘)

그 이유는 이게 html이기 때문이다. html은 매번 어디를 갈때마다 그냥 페이지를 새로고침 시켜버린다.
리액트가 죽고, 새 페이지가 새로고침 되는것이다.

강제로 새로고침하면서 리액트를 죽이는걸 막고싶다면 <a href> 태그 대신에 react-router-dom의 Link를 쓰면 된다.

<Link to="경로"> 페이지 </Link>

 

이제 모든페이지를 죽이고 새로고침하지 않고 페이지가 바뀐다.
또한 about 페이지도 잘나온다.

하지만 2가지를 기억해야한다.

1. router 밖에서 Link를 쓸 수 없다.

Link를 사용하는 Navigation 컴포넌트가 Router(HashRouter) 안에 있어야 한다.

 

2. router 안에 모든걸 넣을 필요는 없다. 예를들어 footer 라는 컴포넌트가 있다면 라우터 밖에 두어도 상관없다. 물론 두개를 동시에 렌더링 하기위해 Fragment는 필요하다. 

이런식으로말이다