https://reactrouter.com/web/api/Hooks

useHistory

history 객체에 접근하기 위한 hook

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

useLocation

현재 URL을 나타내는 location 객체에 접근하기 위한 hook이다.

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageViews() {
  let location = useLocation();
  // URL이 바뀔 때마다 새로운 location 객체를 반환한다.
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
    // 구글 애널리틱스와 같이 page view를 count해야된다던가 하는 경우에 유용하게 사용할 수 있다.
  }, [location]);
}

function App() {
  usePageViews();
  return <Switch>...</Switch>;
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);

useParams

현재 Route의 match.params에 접근하기 위한 hook으로, URL 파라미터를 key, value 쌍으로 이루어진 객체로 파싱하여 반환한다.

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

useRouteMatch

Route컴포넌트를 렌더링하지 않고도 match에 접근하기 위한 hook이다.

즉, 아래와 같이 사용하던 것을

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

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

다음과 같이 대체할 수 있다.

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

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return <div />;
}

useRouteMatch의 사용법은 두 가지가 있다.

1. 인자값을 주지 않고 현재 Route의 match객체를 반환

2. matchPath에 넘겨주는 props의 형태와 동일한 인자를 넘겨주는 방법

const match = useRouteMatch({
  path: "/BLOG/:slug/",
  strict: true,
  sensitive: true
});