FRONTEND/React

Route를 이용하여, 각페이지 연결하기

MarkLEE 2021. 5. 9. 16:14

Route를 이용하기

React에서 페이지를 연결하기는 굉장히 쉽다. 

와 같이, 필요한 BrowserRouter, Route, Switch 그리고 Link를 걸고 싶은 컴포넌트가 있는곳에는 Link를 import해준다. 

 

그리고 BrowserRouter를 가장 밖에 두고, 그다음 Switch, 필요한 곳에 Route를 연결한 뒤, Route 태그안에 path를 적어 연결을 해주면 된다. 여기에서 주의 할 점은 홈 페이지의 path를 /로 설정하게 될텐데, 여기에서는 <Route exact path = "/">와 같이 exact가 필요하다는 점이다. 그렇지 않으면, '/'를 포함한 나머지 페이지들의 주소와 이 홈페이지를 구분하지 못하게 된다.