React Router Dom 훅

📍중첩 라우팅

 

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

 

 

📍Outlet

- 자식 경로요소를 렌더링하려면 부모 경로요소에서 <Outlet>을 사용해야 함

- 하위 경로가 렌더링 될 때 중첩된 UI가 표시 될 수 있음

 

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

 

 

 

📍useLocation

- 이 hook을 이용하여 현재 애플리케이션의 경로 정보를 가져올 수 있다

- 현재 위치 객체를 반환 

 

 

  console.log(location.pathname); // 현재 경로의 경로명
  console.log(location.search); // 현재 경로의 쿼리 문자열
  console.log(location.hash); // 현재 경로의 해시 값
  console.log(location.state); // 현재 경로의 상태(state) 객체

 

 

쿼리 문자열 : url에서 물음표 뒤에 오는 파라미터

http://example.com/search?q=apple&category=fruits

//쿼리 문자열 : q=apple&category=fruits

 

📍useNavigate

- 경로를 바꿔줌 

- navigate('/home')  ==> localhost:3000/home 으로 이동

(1) import

(2) useNavigate () 함수 이용

(3) navigate 설정

 

 

e.target.value: 사용자가 입력한 텍스트값을 가져올 수 있음 

 

 

replace: e.target.value.length === 1? false : true

-> 1이 참이면 false 반환 거짓이면 true 반환