현재 URL의 동적 파라미터를 KEY/VALUE 쌍으로 리턴한다.
사용법
const params = useParams();
URL 파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 하는 것이 없다.
src/pages/About.js
import { useLocation } from 'react-router-dom';
const About = () => {
const location = useLocation();
console.log(location);
return (
<div>
<h1>소개</h1>
<p>pathname:{location.search}</p>
<p>쿼리스트링:{location.search}</p>
<p>hash:{location.hash}</p>
<p>state:{location.state}</p>
<p>key:{location.key}</p>
</div>
);
};
export default About;
const location = useLocation();
pathname:현재 주소의 경로(쿼리스티링 제외)
search:맨 앞의 ? 문자를 포함한 쿼리스트링 값
hash:주소의 # 문자열 뒤의 값
state:페이지로 이동할 때 임의로 넣을 수 있는 상태 값
key:location 객체의 고유값,초기에는 default 상태이며 페이지가 변경될 때마다 고유의 값이 생성됨
-> 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정 하는데 사용한다.
http://localhost:3000/about?detail=true&mode=1
현재 쿼리스트링 값은 ?detail=true&mode=1
사용법
const [searchParams,setSearchParams] = useSearchParams();
const detail = searchParams.get('detail')
const mode = searchParams.get('mode')
searchParams -> 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환
(get,set 메서드)
setSearchParams -> 쿼리파라미터를 객체 형태로 업데이트 할 수 있는 함수를 반환한다.
주의할점
-> 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이여야 한다!
-> Link 컴포넌트 사용하지 않고 다른페이지로 이동할때
const navigate = useNavigate();
컴포넌트 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
style 과 className은 {isActive:boolean}을 파라미터로 전달받는 함수타입의 값을 전달한다.
<NavLink
style={({isActive})=> isActive? 'active' : undefined}
/>