React Router (navigate, nested routes, outlet), useParams

navigate, nested routes, outlet 을 사용하기 위해선 상단에 먼저 import 해준다. 

 

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

 

 

 

 

페이지 이동기능 useNavigate()

페이지 이동을 할 때 Link 를 사용해도 되지만, useNavigate() 사용하면 더 편리하다. 

 

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

useNavigate() 사용하면 유용한 함수들을 사용할 수 있는데, 페이지 이동 기능을 사용할 수 있다. 

 

navigate('/detail')  사용하면 /detail 페이지로 이동이 가능하다. 

 

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

-1 넣으면 뒤로 한번, 1 넣으면 앞으로 한번 이동

 

 

 

 

404 페이지

이상한 경로로 접속할 경우 "없는 페이지입니다."  같은 문구를 보여주고 싶으면

 

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

<Route path = "*"> 이용하면 된다.

 

*  는 모든 경로를 뜻하는데 미리 만들어둔 경로가 아닌 곳에 접속하면 * 경로로 안내한다. 

 

 

 

 

 

서브경로 만드는 nested routes

/about/member 페이지, /about/location 페이지 등 여러 하위 페이지들을 만들고 싶을 땐

<Route path="/about/member" element={ <div>member</div> } />
<Route path="/about/location" element={ <div>location</div> } />

위와 같이 만들어도 되지만, 

 

 

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>member</div> } />
  <Route path="location" element={ <div>location</div> } />
</Route>

위와같이 만들어도 된다. 

 

<Route> 안에 <Route> 를 넣을 수 있는데 이러한 방식을 Nested routes 라고 한다. 

/about/member 접속시 <About /> 과 element 안의 요소를 같이 보여준다. 

 

실제로 보이기 하기 위해서는 <About /> 안에 하위 route 의 위치를 지정해주어야 하는데 <Outlet> 사용하면 된다.

 

function About(){
  return (
    <div>
      <h4>About</h4>
      <Outlet></Outlet>
    </div>
  )
}

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

따라서 유사한 서브페이지들이 많이 필요하다면 이러한 방식으로 사용해도 된다. 

 

페이지 url 을 바꿀 때마다 각각 다른 UI 를 보여주는데, 이러한 방식도 동적인 UI 를 만드는 방법 중 하나이다. 

 

따라서 라우터를 사용하여 동적인 UI 도 만들어줄 수 있다. 

라우터 사용하면 뒤로가기 버튼을 쉽게 구현할 수 있다는 장점이 존재하기도 한다. 

 

 

 

 

상세페이지 여러개 만들기 

상품이 여러 개 있으면 상세 페이지도 여러 개 필요하다.

 

페이지를 여러 개 만들고 싶을 땐 URL 파라미터 라는 문법을 사용한다. 

path 작명할 때 /: 사용하면 '아무 문자' 를 뜻한다. 

 

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

따라서 위와같이 Route 를 작성했을 때 주소창에 /detail/아무거나 입력했을 때 <Detail> 컴포넌트를 보여달라는 뜻이다. 

 

 

 

 

페이지마다 다른 내용 보여주기 

/detail/0

/detail/1

이런식으로 페이지를 여러개 만들어 놓았지만 페이지에 들어가보면 다 똑같은 상품명만을 보여주고 있다. 

 

0이라고 하드코딩 해놨던 자리에 현재 url 파라미터에 입력된 숫자 를 넣어주면 된다. 

해당 숫자를 가져오는 방법에는 useParams 를 사용하는 방법이 있다. 

 

useParams 라는 함수를 상단에 import 하면 사용할 수 있는데, 

해당 함수를 사용하면 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있다. 

 

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

function Detail(props) {
  let { id } = useParams();
  let picId = parseInt(id) + 1;

  let shoeFind = props.shoes.find((e) => {
    return e.id == id;
  });

  console.log(shoeFind);

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src={"https://kosssshhhhh.github.io/shop/shoes" + picId + ".jpg"}
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{shoeFind.title}</h4>
          <p>{shoeFind.content}</p>
          <p>{shoeFind.price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;

path 작명 시 url 파라미터는 몇번이고 사용 가능하다. 

detail/:~/:~ 이런식으로..