TIL) 내 버킷리스트 만들기 - 라우팅, React

버킷리스트의 목록을 누르면, 상세페이지로 이동하게 만들기

 

 

힌트:

1. Detail.js라는 파일 하나를 만들고 <Detail/> 컴포넌트를 만드세요!

2. 어떤 버킷 리스트 항목을 눌러도 그 페이지로 가게 해볼거예요!

3. history.{}를 써봐요! ({}엔 뭐가 들어갈까요?)

4. 꼭 코드스니펫을 복사해서 써주세요.

5. 버킷리스트 컴포넌트에서는 useRef를 쓰는 대신 element에 직접 onClick을 줘서 해봅시다!

 

 

 

 

순서:

1.  index.js 에 import {BrowserRouter} , 

     <BrowserRouter>

         <App / >

     <BrowserRouter>

2.  Detail.js file 만들고 import React, function Detail() , return 안에

      <h1> 태그로 상세페이지 입니다! 출력되도록

      export default Detail;

3.  App.js에서 import {Route} from "react-router-dom";

      import BucketList, Detail

      return에 페이지 이동할 컴포넌트 <BucketList> <Route></Route> 로 감싸줌. 

      <Route path="/" exact>  경로가 /이면 Bucketlist가 보이는 페이지

      <Route>태그로 <Detail /> 감싸주고 <Route path="/detail" exact> 

 4.  BucketList.js에서 import {useHistory}, BucketList = (props) => {

        import {useHistory} from "react-router-dom";

        const history = useHistory();

       그리고 <ItemStyle> 태그 안 onClick 함수에 history.push("/detail")