[React] Route 부가적인 부분 (history, withRouter..)

history

history라는 기능이 Route에 많이 보이는데, 도당체 어떤 거냥??

history는 자바스크립트 다양한 환경에서 history 세션을 관리해준다.

 

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

 

깃허브 주소에서 보자면

history objects typically have the following properties and methods:

• length - (number) The number of entries in the history stack
• action - (string) The current action (PUSH, REPLACE, or POP)
• location - (object) The current location. May have the following properties:
  • pathname - (string) The path of the URL
  • search - (string) The URL query string
  • hash - (string) The URL hash fragment
  • state - (object) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history.
• push(path, [state]) - (function) Pushes a new entry onto the history stack
• replace(path, [state]) - (function) Replaces the current entry on the history stack
• go(n) - (function) Moves the pointer in the history stack by n entries
• goBack() - (function) Equivalent to go(-1)
• goForward() - (function) Equivalent to go(1)
• block(prompt) - (function) Prevents navigation (see the history docs)

이렇게 기능이 많다 ;;;

 

그중 많이 쓰는 push는 특정 경로로 이동하는 것을 의미하고 goBack은 뒤로 가기이다.

action은 최근 액션(뒤로 가기, 앞으로, 특정 위치로)을 보여주고 block은 탐색 방지라고 한다...?!

 

사용자가 페이지를 이탈하는 것을 방지할 때 쓴다는 데 ,,,

 

그 머기시냐 페이지 이탈할 때 페이지 나가겠습니까? 이딴 걸 말한다고 한다고 한다.

useEffect(() => {
	console.log(history)
	const unblock = history.block('정말 떠나실건가요??');
	return () => {
	    unblock();
	}
}

이따구로 쓰는 듯??

listen은 경로에 변경이 생겼을 때 특정 함수를 호출하고 싶은 경우에 사용한다.

location은 현재 자신이 있는 곳을 나타낸다.

replace는 해당 주소로 이동하지만 기록을 남기진 않는다.

withRouter

라우터 컴포넌트가 아닌 곳에서 math, location, history를 사용하는 속성이다.