React, 리액트 라우터: navigate, nested routes, outlet

좋은 폴더구조

비슷한 .js 파일끼리 한 폴더에 묶어놓으면 좋은 폴더구조

• 컴포넌트 역할하는 JS 파일은 components 폴더
• 페이지 역할하는 JS 파일은 routes 아니면 pages 폴더
• 자주 쓰는 함수가 들어있는 JS 파일은 utils 폴더
• 기타 등등은 필요할 때마다 폴더 만들어 씀

리액트 라우터

페이지 이동기능 useNavigate()

페이지 이동은 Link를 써도 되지만 useNavigate()를 써도 됨

 

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

 

useNavigate() 쓰면 그 자리에 페이지 이동시켜주는 함수가 남음

navigate('/detail') 실행되면 /detail 페이지로 이동

숫자넣으면 앞으로가기, 뒤로가기 기능개발도 가능함

-1 넣으면 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기 기능

 

404페이지

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 여부를 나타냄

그 중 없는 페이지일 때 나타내는 번호가 바로 404

이외에도 여러가지 오류 번호가 있는데 더 많은 번호를 알고 싶다면 웹페이지를 확인

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

HTTP response status codes - HTTP | MDN

 

그래서 사용자가 이상한 경로로 접속했을 때 "없는 페이지임" 알려주는 페이지를 보여주고 싶다면

 

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

 

<Route path= " * "> 를 맨 밑에 만들어두면 됨

* 경로는 모든 경로를 뜻해서 이상한 페이지 접속시 * 경로로 안내해줌 

 

서브경로 만들 수 있는 nested routes

 

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

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

 

1번으로 만들어도 되지만 2번으로 만들 수 있음

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

 

/about/member로 접속시 <About> & <div>멤버</div> 을,

/about/location으로 접속시 <About> & <div>회사위치</div> 을 보여줌

 

다만 이렇게만 코드를 짜면 <div>가 보이지 않는데

이유는 <About> 안에 <div>를 어디에다가 보여줄 것인지 표기를 해주어야 함

 

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

 

<Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳

서브경로로 접속시 <Outlet>자리에 해당되는 <div>가 잘 보임