React-router_TIL(37)

리액트라우터에서 멈춘지 어언 하루이틀... 어렵다 어려워 ㅠ

그래서 오늘 간단히 액기스만 정리를 하면서 머릿속에 우겨넣어볼까한다. 화이팅👍

---

1.useNavigate()

원래는 Link라는 훅을 이용해서 상세페이나 마이페이지를 들어갈 수 있지만

Link훅은 html의 a태그의 역할로 브라우저에서보면 사실 안예쁘고 내가 따로 디자인을 손을 봐야한다.

 

그래서 쓰는 훅이 useNavigate()이다.

이 훅은 내가 미리 만들어놓은 html태그에 onClick={()=>{useNavigate("/mypage")}}으로 가뿐히 설정가능하다.

 

2.Outlet

<Route path="/mypage" element={<Mypage/>}></Route> 이 있다.

근데 이 mypage에는 article , accout 페이지가 있다면?

그때마다 <Route>를 써줘도 되지만 그럴 필요없이

<Route path="/mypage" element={</Mypage>}>
  <Route path="account" element={</Account>}
  <Route path="Article" element={</Article>}
</Route>

이렇게 Route로 감싸주면 굳이 경로를 다 적지 않아도 라우터 기능이 가능하며, 속한 페이지에 들어가도 mypage글을 볼 수 있다.

여기서 이제 그럼 <Mypage>컴포넌트에서 account의 컴포넌트가 나왔으면 하는 위치의 태그에 <Outlet></Outlet>을 적어주면 된다. 

그럼 사용이 가능

 

3.URL parameter

이제 예를 들어서 상세페이지가 있는데 이 상세페이지는 같은 디자인에 내용만 바뀌고 대신 여러페이지라면 그때 마다 라우터를 줘도 되지만 그럼 코드의 줄이 길어지므로 url 파라미터를 준다.
<Route path="/detail/:id" /> 이렇게 줄 수 있다. :id의 뜻은 detail/1,2,3,4,5,,,,뭐가 들어와도 element에 해당하는 페이지를 보여준다는 거다.

우리는 이 :id를 URL parameter라고 한다.

그럼 숫자가 다를때마다 같은 내용이 나올텐데? 라고 생각했다. 

 

3-1.useParams()

그러면 element에 있는 페이지에 들어가서 params를 사용한다. params 는 :id에 적은 숫자만 추출해서 가져오는 훅이다. 

let {id}= useParams()로 변수를 지정해준다음 숫자가 필요한 자리에 {id}를 가져다가 쓰면되는거다.

만약 id,title,content가 있다면 자료를 가져오기 위해서 객체나 배열 자료를 추출하는 문법이 있을껀데 거기다가 넣어주면된다.

title[id] ,content[id]이런식으로 사용하면 주소 값이 2였다면 2번째에있는 배열의 값을 가지고 페이지가 렌더링이 될꺼다.

 

아니면 주소 값과 고유의 id가 일치하는 글을 가져와라! 이런식으로 작성도 가능하다.

오히려 이렇게 해놓으면 오류가 덜 발생할 꺼 같긴하다.

 

오늘의 리액트 라우터 간단한 정리 끝😎