[React] navigate, 404error 발생 시키기, nested routes, outlet

목표

리액트 라우터의 기능들 중 navigate, nested routes, outlet 사용법을 익힌다.

 

기본 설정

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

App.js 상단에 위 내용을 import한다.

 

페이지 이동기능 useNavigate

<Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
<Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link>
<Nav.Link onClick={()=>{navigate(-1)}}>Back</Nav.Link>

/ 는 홈으로 이동, -1은 이전 페이지로 이동이다. 만약 파라미터로 2가 들어간다면 다음 2 페이지로 이동을 의미한다.

 

404 페이지 만들기

<Route path="*" element={<div>404error 없는 페이지입니다.</div>}/>

Route 태그들 중 가장 밑에 사용해야 하는 태그이다.

윗 태그들 중 알맞은 url이 없는 주소를 사용자가 입력했다면, 위의 '404error 없는 페이지입니다.' 문구로

해당 페이지가 존재하지 않음을 알려준다.

 

abcd 페이지는 없기 때문에 404 error 발생

 

nested routes, outlet

<Route path="/about" element={<About/>}>
  <Route path="member" element={<div>멤버임</div>}/>
  <Route path="location" element={<div>위치정보</div>}/>
</Route>

nested routes 구조를 갖춘 코드이다.

사용자가 주소창에 'localhost:3000/about/member' 를 입력하면, localhost:3000/about의 출력내용과 함께

localhost:3000/about/member 내부 컴포넌트들도 함께 출력된다.

하지만 위 코드만으로는 내부 페이지인 member와 location의 <div>태그 내용이 출력되지 않는다.

이유는 해당 컴포넌트들이 어떤 위치에 자리잡아야 하는지 지정을 해주지 않은 상태이기 때문이다.

function About(){
  return(
    <div>
      <h4>회사정보임</h4>
      <Outlet></Outlet>
    </div>
  )
}

위처럼 About 컴포넌트에서 <Outlet> 태그를 사용하여 위치를 지정해주면

localhost:3000/about/member 또는 localhost:3000/about/location을 사용자가 url로 입력했을 경우

localhost:3000/about의 출력 내용과 더불어 하위 태그들의 컴포넌트들도 함께 출력된다.

 

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌