회사 기존코드 공부하며 새로 배운 것 정리
history.push("/login")
과 같이 사용한다history
객체를 사용하려면, props를 통해 부모 컴포넌트로부터 전달받아야 한다.history
객체가 자동으로 전달된다Redirect
처럼 현재(이동전)의 URL이 이동 후에는 남지 않도록 할 때 쓴다.react-router-dom
의 Redirect를 import해온 후 <Redirect to='/login'>
와 같이 사용한다history.replace
처럼 작동한다. (history에 이동전 경로가 남지 않는다)react-router-dom
의 Link를 import해온 후 <Link to='/login'>
와 같이 쓴다<a></a>
태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 <a></a>
태그와 다르게, 페이지 전체를 리로드하지 않고 필요한 부분만 리로드한다<Link to='/login' replace={true}/>
처럼 쓴다history.push(pathname)
으로 이동하는 다음 페이지에서 나타내주기// 'PhoneValidate' 컴포넌트 에서 'SetAccount' 컴포넌트로 이동
<button onClick={() => {this.props.history.push("/set_account")}} />
// 'PhoneValidate'의 'userCell' state를 'SetAccount'로 이동시 props로 넘겨주기
import {useHistory} from "react-router";
const history = useHistory();
<button onClick={() => {history.push({
pathname: "/set_account",
state: {userCell: userCell}
})}} />
// 넘겨받은 'userCell' props를 'SetAccount'에서 사용하기
import {useLocation} from "react-router";
const location = useLocation();
const userCell = location.state.userCell;