오늘의 react

1.  Navigate, nested routes, outlet

- useNavigate() -훅(use로 시작하는 것들, 유용한 것들이 들어있는 함수)

import { Routes, Route, Link, useNavigate} from "react-router-dom";

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

 

- 404 페이지 생성

<Route path="/detail" element={<Detail />}/>
// *을 쓰면 위에 만든 라우터를 제외한 모든것
<Route path="*" element={<>없는페이지요</>}/>

 

 

- Nested Routes(route 작성 약간 간단해진다.)

//(about/member), (/about/location)
<Route path="/about" element={<About/>}>
   <Route path="member" element={<About/>}/>
   <Route path="location" element={<About/>}/>
</Route>

- Nested route 접속시엔 위에처럼 element가 2개이면 2개 보이니까 어디 보여줄지 작성해야 한다. 그래서 outlet을 사용한다. 

- Nested route의 element 보여주는 곳은 outlet

 

import { Routes, Route, Link, useNavigate, outlet} from "react-router-dom";


<Route path="/about" element={<About/>}>
   <Route path="member" element={<div>멤버</div>}/>
   <Route path="location" element={<About/>}/>
</Route>
function About() {
  return (
    <div>
      <h4>회사정보</h4>
      <Outlet></Outlet>
    </div>
  )
}

 

- Nested route는 언제 쓰면 좋을까?

• 여러 유사한 페이지가 필요할 때
  • 글자나 박스 같은 조금한 것들이 바뀌어야 할 때 
  • 모달창 기능이나 탭 기능

- 라우터의 장점

• 이런 식으로 UI 만들면 뒤로가기 버튼 이용 가능
• 페이지 이동이 쉬움(UI 스위치 조작 가능)