useHistory

아래의 내용은 react-router-dom@5.3.0 기준입니다.

useHistory

• 원래 history 객체를 사용하기 위해서는 withRouter 를 사용하여 match, location 과 함께 사용 할 수 있게끔 했었다.
• react-router-dom 버전이 5.1 이상으로 올라오면서 useHistory 를 이용하여 history 객체를 사용 할 수 있게끔 바뀌었다.
• BrowserRouter 를 사용하면서 history 객체가 필요하다면 바로 import 하여 사용하면 되는 것.

https://zereight.tistory.com/602
→ 참고 블로그

history 객체

• history 객체는 페이지를 이동한 내역을 정보로 가지고 있는 객체이다.
• 객체의 메소드를 이용하여 앞으로가기, 뒤로가기 등의 기능을 구현 할 수 있다.
  → 각각 goFoward(), goBack() 메소드
• react-router-dom의 useHistory 를 사용하여 history 객체에 접근 할 수 있다.

// App.js

import { useHistory } from 'react-router-dom' {//훅을 불러온다.}

const app = () => {
	const history = useHistory() {//훅을 변수로 지정한다.}
  return (
    <button onClick={() => {history.goBack(1)}}>뒤로가기</buttom>
    {// 객체처럼 사용한다!}
  )
}

export default App;

• 하지만 useHistory 는 라우터의 자식 컴포넌트에서만 동작하므로, index.js 에서 렌더링할 컴포넌트를 BrowserRouter 로 감싸주어야 한다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
// Router란 이름으로 BrowserRouter를 불러온다.

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
// 렌더링되는 컴포넌트를 감싼다.

• 원래는 history 객체를 사용하기 위해서 구조분해 할당을 이용하여 컴포넌트의 인자로 받아 withRouter로 사용하는 방법을 사용했다.
• 그러다가 리액트에서 hook 이라는 개념이 나왔고, useHistory 도 hook이라는 개념에 속한다.

---

+

history.push()

• 해당 요소를 클릭하는 경우 지정한 path 값에 해당하는 주소로 이동한다.
• 주로 메인페이지가 아닌 페이지에서 다른 페이지로 넘어가기 위한 버튼을 만들 때 사용한다.
• path 를 이용하여 다른 페이지로 이동하기 위해서는 원래는 Link 컴포넌트를 사용해야 하지만, push와 이벤트 제어를 이용하여, 이벤트가 발생하는 경우 이동 할 수 있게 만들 수 있다.

//App.js

import './App.css';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { useHistory } from 'react-router-dom'

const Home = () => {
  return (
    <div>
      <Link to="/nothome">nothome</Link>
      {// Link 컴포넌트를 이용하여 다른 컴포넌트로 이동한다.}
      <div>메인화면이지롱</div>
    </div>
  )
}

const NotHome = () => {
  const history = useHistory()
  return (
    <div>
      <div>메인화면아니지롱</div>
      <button onClick={()=> {history.push("/")}}>home</button>
      {// history.push 와 이벤트를 이용하여 버튼을 클릭하면 "/" 라는 path로 이동한다.}
    </div>
  )
}

const App = function () {

  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/nothome" component={NotHome} />   
      </Switch>
    </BrowserRouter>
    {// NotHome 컴포넌트가 라우터의 자식컴포넌트가 되므로 useHistory가 사용가능하다.}
    {// 만약 App.js 에서 사용하고자 한다면 index.js에서 App.js를 라우터로 감싸야한다.}
  )
}

export default App;

---

+

• 현재는 리액트 라우터가 6버전으로 업데이트 되어 다른 부분이 생겼다고 한다.

https://blog.woolta.com/categories/1/posts/211
정리가 잘된 포스팅 링크!