[프론트엔드] react router v6 Query 읽는법 (location)

 

이전 글

• 2022.03.16 - [프론트엔드/React] - [프론트엔드] react router v6 Query 읽는법 (location)
• 2022.03.14 - [프론트엔드/React] - [프론트엔드] REACT ROUTER-TUTORIAL 오류 수정

​

 

 

1. userLocation()  사용

 

import React from "react";
import { useLocation } from "react-router-dom";

const About = () => {
    const { search } = useLocation();

	//현재 지금 경로가(search) '?detail=true' 인지 확인
	const showDetail = search === '?detail=true';
    
    return (
        <div>
            <h1>소개</h1>
            <p>이 프로젝트는 리액트 라우터 기초를 실습해 보는 예제 프로젝트입니다.</p>
            {showDetail && <p>detail 값 true</p>}
        </div>
    )
}

export default About;

 

 

 

2.  Query 사용 화면