ReactJS (5) Router

라우터를 사용하고 싶으면 react-router-dom을 사용하면 된다

npm i react-router-dom@5.3.0

필자는 5.3.0 버전을 사용하기 때문에 뒤에 @5.3.0을 붙여줬다 최신버전을 사용하고 싶으면 @5.3.0을 빼고 적어주면 된다

 

Home.tsx 파일을 만들었다

Info.tsx를 만들었다

이렇게 두 개의 파일을 만들고 각각의 url을 지정해 줄 거다

 

Router.tsx 파일을 만들고 router 설정을 해줌

참고로 버전 5와 6은 문법이 다르기 때문제 주의 해야된다 (필자는 버젼 5 쓰는 중)

<BrowserRouter> = parent component

<Switch> = <Route> Component을 각각 따로 실행한다

<Route> = path props에서 url을 설정해 준다

 

이후 App.tsx에서 Router component를 불러준다

 

예)

 

참고로 /:info는 :를 붙였을 때 info라는 변수를 넣어준다는 뜻이고

예를 들면 /news로 이동했을 때 news는 info 변수이고 info 페이지로 넘어가게 된다

 

예)

 

npm run start로 react 프로젝트를 실행 후 처음 뜨는 페이지가 바로 / 페이지고 (localhost:3000)

난 이걸 Home으로 지정해 줬다

 

예)