Query
useLocation 과 useSearchParams 2개가 있다.
useLocation의 경우 path로 적었던 그 뒷부분부터 [? 이후]모든 값을 들고온다.
useSearchParams는 조금 더 써야 한다.
let [searchParams,setSearchParams]=useSearchParams();
let nameText=searchParams.get("name");
대신 해당이름의 값만 들고오기 때문에 구별은 쉽다.
컴포넌트가 아닌 JS의 함수로 이동하는것도 가능하다.
이 경우에는 useNavigate라는 함수를 사용한다.
import {useNavigate} from "react-router-dom"; 추가
let navigate=useNavigate();return 위에 추가
navigate(`/about?name=${input}`);return 안에 추가
여기서 input은 input:text로 값을 받아오는 것도 추가해서 텍스트로 값을 입력하고 전송을 눌려서 그 값이 querystring형으로 출력되게 해준다.
[계속하는 실수 : 변수명.map(()=>()) 형태다. 두번째 () 대신에 {}를 넣게 되면 JS형을 읽어버려서 값은 안뜨는데 에러도 안뜬다.]
한글로 입력한 경우 useLocation에서는 인코딩과 디코딩 중간인 %로 붙은 여러가지 값이 나온다. 예)가나다 = %EA%B0%80%EB%82%98%EB%8B%A4