[리액트]React-Router-DOM

진경·2022년 4월 27일
0

리액트

목록 보기
4/4

React-Route: 페이지에서 다른 페이지로 넘어갈 때 새로고침(로딩) 없이 빠르게 넘어가기 위해 사용한다.

https://github.com/Dojinkyung/coin_app
코인 앱을 만들다가 새로운 페이지지만 새로고침은 하지 않는 방법을 사용하였다.
처음에 버전이 맞지 않아 원하는 페이지 변경이 일어나지 않았다.
버전을 변경해준 뒤

<Router>
        <Routes>
          <Route path="/detail/:id" element={<Detail/>}>    
          </Route>
          <Route path="/" element={<Coin/>}>  
            
          </Route>
        </Routes>
      </Router>

이런 방식으로 코드를 변경해주었다.
그 후 디테일 페이지로 넘어가기 위해 버튼에 <Link to={/detail/${coin.id})>를 이용하여 디테일 페이지로 넘어갔다.

profile
프론트엔드 취준생입니다

0개의 댓글