React의 라우팅 방법.

Vue는 Vue Router,

 

React에는 react-router-dom 이라는 라이브러리가있다.

 

이 라이브러리로 브라우저에서 라우팅을 해준다.

 

 

일단 react router dom을 구글에 검색해서 npm 설치 문구를 cmd에 입력한다.

 

버전이 1년에 한번은 바뀌니 사용법도 자주 바뀌는듯하다.

 

설치가 됐으면,

 

index.js 파일에서

BrowserRouter 또는 HashRouter를 import 해온다.

 

둘 중 아무거나 해도 상관없지만, BrowserRouter은 일반적인 라우팅인데,

 

반면 HashRouter는 url에

 

이렇게 /# 기호가 생긴다.

 

저렇게 #이 들어가면 #뒤의 텍스트들은 서버에 요청되지않고, React가 전부 라우팅을 처리하게된다.

 

즉, React나 Vue 프론트엔드 개발 방식은

 

클라이언트 사이드 렌더링 방식이기에 기본적으로 React가 라우팅을 담당하지만 사용자가 url에 요청한 주소가

 

패키지에 정의돼있지않다면, 서버로 그 페이지를 요청한다.

 

하지만 서버에도 그 페이지를 반환할 미들웨어가 없기때문에, 결국 404에러가 반환된다.

 

HashRouter를 쓰면 해당 실수를 방지할 수 있으며 url에 요청된 주소가 패키지 내에 없다하더라도 서버에 전달되지않고 온전히 React가 그것을 처리한다.

 

따라서 404에러가 나는것을 막을 수 있다.

 

 

어쨋든 HashRouter나 BrowserRouter를 셋팅하고 주소창에 아무 url이나 난사하면,

 

그 path에 맞는 Route가 없으니

 

패키지 안에 페이지별로 정의한 path 컴포넌트들은 안보이고 딱 App.js 컴포넌트만 보이게된다. 

 

 

그리고 컴포넌트 js파일에는 

 

요것들을 import해준다.

 

 

그러면 url path별로 보여주고싶은 컴포넌트나 html들을

 

이렇게 Route 태그로 감싸주고 path 주소를 정의해주면 해당 url이 path와 일치할 때,

해당 컴포넌트가 보이게된다.

 

혹은,

이렇게도 보여줄 수 있지만 props 전송이 힘드니 유용하지는 않다.

 

 

 

추가로 Vue.js 는 router.js에서 페이지를 나눌 때,

 

위에서 부터 아래의 순서대로 일치하는 path를 반환했지만

 

React는 생성한 Route들 중 그 path가 url에 입력된 텍스트를 포함한다면 해당 Route에 든 html들을 전부 가져오기때문에 정확한 라우팅을 위해 exact를 태그에 붙여주는게 좋다.

 

Switch 태그를 사용해 이 문제를 방지할 수도 있다.

 

react-router-dom에서 Switch를 import해서

 

path겹침을 방지하고자하는 부분에 전체적으로 씌워준다.

 

그러면 해당 Switch 태그가 씌워진 컴포넌트의 부분들은 exact를 붙이지않아도 정확한 라우팅이 가능하다.

 

 

 

그러면 컴포넌트를 path별로 나누는걸 넘어서,

 

이동하는 방법을 알아보자.

 

이렇게 href로도 가능하고

 

Link태그로도 만들어줄 수 있다.

 

Link to="/경로" 

 

이런 방법이다.

 

아니면 태그 안에 as={Link}를 넣으면 to="/경로~" 이렇게

 

꼭 a태그 종류가 아니더라도 해당 element를 a태그로 사용할 수 있다.

 

 

 

이 방법들은 html에서 경로를 지정해주는 방법이고,

 

자바스크립트로 지정해주고싶을 때는 useHistory라는 훅을 import해와야한다.

 

react-router-dom 라이브러리에서 import 후 사용할 컴포넌트에서 변수에 담아준다.

 

사용은 저렇게 onClick 같은 이벤트에

 

go(-1)이나 goBack()같은 함수를 사용해서 뒤로가기나

 

goForward()로 앞으로가기를 작동하게 할 수 있고,

 

이렇게 push 함수에 경로를 넣어 페이지 이동을 하게할 수도 있다.

 

 

 

 

참고)

 

react-router-dom 6버전 이상에서 useHistory는 useNaviage으로 함수명과 기능이 바뀌었다.