router(상세 페이지)

상세 페이지 만들기(nested routes)

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

function App(){
   const navigate = useNavigate()
  
   return (
   //...
   <Route path="/page1" element={<Page1/>}> 
      <Route path="page1-1" element={ <div>페이지1-1</div> } />
      <Route path="page1-2" element={ <div>페이지1-2</div> } />
   </Route>
   )
}

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

function Page1(){
  return (
    <div>
      <h1>페이지1</h1>
      <Outlet></Outlet>
    </div>
  )
}

<Route> 안에 <Route>를 넣어 Nested routes를 만들고 nested routes의 element를 보여줄 곳을 <Outlet>을 표시해 준다.

/page1/page1-1로 접속하면 <Page1/> 이랑 <div>페이지1-1</div> 를 보여준다. (페이지1 페이지1-1)

/page2/page1-2로 접속하면 <Page1/> 이랑 <div>페이지1-2</div> 를 보여준다. (페이지1 페이지1-2)

 

상세 페이지 여러개 만들기

<Route path="/dtail/0" element={ <Detail/> }/>
<Route path="/detail/1" element={ <Detail/> }/>
<Route path="/detail/2" element={ <Detail/> }/>
//...

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

두번째 코드처럼 URL 파라미터 문법을 이용하면 첫번째 코드처럼 페이지를 여러개 만들 수 있다.

 

import { useParams } from 'react-router-dom'

function Detail(){
   const {id} = useParams();
   
   return (
   <h1>{id}</h1>
  )
}

useParams()를 사용하면 현재 /:url파라미터 자리에 유저가 입력한 url값을 가져올 수 있다.

유저가 /detail/1로 접속하면 id라는 변수에 1이 들어온다. 이 id 변수를 이용해 각 페이지에 보여지는 내용을 다르게 구현할 수 있다.

 

path 작명시 url 파라미터는 계속 사용 가능하다.(detail/:id1/:id2)