[리액트] history.location.search?

• How to pass params with history.push/Link/Redirect in react-router v4?

According to the docs:

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 - (string) 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

예시 코드

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

state 사용법

history.push로 보내는 url과 라우터로 연결된 컴포넌트 내에서 다음과 같이 사용 가능하다.

// 라우터 연결
<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

// 컴포넌트 사용
this.props.location.state.detail

withRouter?

• [React] WithRouter 언제 사용? 사용하는 방법 (+코드예제)

라우터에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근할 수 있도록 해준다.

라우팅을 하는 컴포넌트가 있고, 그 라우팅된 컴포넌트에서 다른 컴포넌트를 사용할 때 사용하면 된다.

위 링크에 예시 코드 있으니 참고할 것!