[REACT-Shop-PJT] 리액트 라우터 2 : navigate, nested routes, outlet

리액트 프로젝트 폴더구조는

리액트는 html 이쁘게 만들어주는 쪼그마한 라이브러리일 뿐이다.

그래서 만들 파일들은 거의 .js(jsx) 파일이기 때문에

비슷한 .js 파일끼리 한 폴더에 묶어놓으면 좋은 폴더구조라고 할 수 있다.

 

컴포넌트 역할하는 js 파일은 components 폴더에 묶고

페이지 역할하는 js파일은 routes 아니면 pages 폴더에 묶고

자주 쓰는 함수가 들어있는 js 파일은 utils 폴더에 묶고

알아서 필요할 때마다 폴더를 만들어쓰면 된다.

 

 

1. 페이지 이동기능을 만들고 싶으면 useNavigate()를 쓴다

Link를 쓰기도하지만, useNavigate()를 사용하기도한다.

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

navigate(2) 숫다넣으면 앞으로가기, 뒤로가기 기능개발도 가능하다.

-1 넣으면 뒤로 1번 가기

2넣으면 앞으로 2번 가기 기능

 

 

2. 404페이지는

유저가 이상한 경로로 접속했을 때 '없는 페이지입니다' 이런걸 보여주고싶다면?

<Route path="*" element={ <div>없는페이지임</div> } />

 

* 경로는 모든 경로를 뜻해서

위에 만들어준 /detail 이런게 아닌 이상한 페이지 접속시 * 경로로 안내해준다.

 

 

3. 서브경로 만들 수 있는 nested routes

/about/member 로 접속하면 회사맴버 소개하는 페이지

/about/location 으로 접속하면 회사위치 소개하는 페이지

를 만들고싶다면?

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

이렇게 만들어도 되겠지만

 

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

 

이렇게 만들어도 된다.

 

<Route> 안에 <Route> 를 넣을 수 있는데 이걸 Nested routes 라고 부른다

저렇게 쓰면

/about/member로 접속시 <About>&<div>맴버들</div>를 보여준다

/about/locatyion으로 접속시 <About>& <div>회사위치</div> 를 보여준다.

 

실제로 보일까?

/member 경로에 와도 보이지 않는다

 

사실은

/about/member로 접속시 <About>안에 <div>맴버들</div>를 보여준다

그래서 <About> 컴포넌트 안에 <div>를 어디다 보여줄지 표기해야 잘 보여준다

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

위에서 import 해온<Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳이다.

그래서 이렇게 해두면

/about/member로 접속시 <Outlet>자리에 아까의 <div> 박스들이 잘 보인다

그래서 유사한 서브페이지들이 많이 필요하다면 이렇게 만들어도 된다

 

이제 어디에 표기해줄지 지정하니까 잘 보인다

 

방금 만든거보면 페이지 url을 바꿀 때마다 각각 다른 UI를 보여주는데

이것도 동적인 UI 만드는 방법 중 하나이다

그래서 라우터써도 동적인 UI 만들 수 있다

라우터쓰면 뒤로가기 버튼을 이용가능하다는 장점이 있다

 

---

출처 : 코딩애플 react 강의