리액트 라우터

react-router-dom

Route 컴포넌트로 특정 주소에 컴포넌트 연결


<Route path="주소규칙" component={보여 줄 컴포넌트} exact={true}/> // true에 {},"" 둘다 가능하고 exact만 써서 생략 가능하다.(기본값 true)

라우터페이지의 규칙이 겹치는 경우, 겹치는 페이지의 exact라는 props를 true로 설정해주면 된다.


<Link to="주소">내용</Link>

라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 된다.

history 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나로, 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출 할 수 있다.

특정 버튼을 눌렀을 때, 뒤로가기나 로그인 후 화면을 전환하거나, 다른 페이지로 이탈 하는 것을 방지해야 할 때, history를 사용한다.

withRouter 함수는 HoC(Higher-order Component) 이다. 라우트로 사용된 컴포넌트가 아니어도, match, location, history 객체를 접근 할 수 있게 해준다.

component를 props 로 라우팅기능을 넘기면 매 순간 렌더를 하기때문에 성능이 떨어진다.

그래서 직접 컴포넌트를 불러오자 그렇게하기 위해서는 리액트의 메소드를 이용해야한다.(useHistory)

React Router의 Link는 페이지의 부분만을 바꿔준다.

HTML Link는 새로운 페이지를 여는 차이가 있다.