[React] 페이지 이동시 값 넘겨주기

useHistory()

import { useHistory } from "react-router-dom";

const test = useHistory();

처음에 이 방법을 이용하여 사용하고자 했는데, 계속적으로 오류가 나서 찾아보았다.

stackflow를 들어가서 해결점을 찾게 되었다. 내가 참고한 글이 오래된 글이었으며, 지금은 useHistory대신에 useNavigate를 사용한다는 것이었다. react-router-dom 6버전에서부터 교체 된 것 같았다.

useNavigate()

내가 구현하고자 하는 기능은 버튼 클릭시 페이지가 이동된다. 그리고 이동시에 값도 같이 넘겨주도록 기능을 설계하고자 하였다.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

모듈을 불러오고,

let [inputValue, setInputValue] = useState("");
const test = useHistory();
  const handleChange = (e) => {
    setInputValue(e.currentTarget.value);
  };

<input placeholder="ID" type="text" onChange={handleChange} />

넘겨주고자 하는 값을 useState에 설정한다. 그리고 input에 내가 원하는 값을 집어넣고, 이 값을 handler로 받아온다. 그리고 inputValue에 넣어준다.

<button type="submit" onClick={() =>  navigate.push({
                      		pathname: "/login",
                      		inputValue: inputValue,
                    			})}>

반응형

이렇게 넘겨주었다.

useLocation()

넘겨준 값을 받아와서 써야 하는데, 이 때 쓰는 것이 ***useLocation()***이다.

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

모듈을 불러오고,

let location = useLocation();
console.log(location);

써주면 콘솔에 값이 나오게 되는데, 내가 받고자 하는 값이 search에 넘어오게 된다. 그래서 location.search를 통해 값을 이용하면 된다.

쿼리스트링

URL = https://http://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=html5

위와 같은 url이 있을 때,

alert(window.location.search);   // "?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8"
alert(window.location.pathname); // "/webhp"

를 많이 쓴다.