react router Hooks

React Router 는 라우터의 상태에 액세스하고 구성 요소 내부에서 탐색을 수행할 수 있는 Hooks를 제공한다.

withRouter HOC 를 사용해야 match, location, history 객체에 접근할 수 있었던 기존 방식을 대체하는 데에 좋은 hooks!

useHistory

useHistory Hook 은 탐색에 사용할 수 있는 history 객체에 접근할 수 있도록 해준다.

import React from 'react';
import { withRouter } from 'react-router-dom'; 

const Home = ({ history }) => {
  return (
    <div onClick={() => history.push('/auth')}>Hello!</div>
  );
};

export default withRouter(Home);

• BrowserRouter, Switch에 의해 Home 컴포넌트의 defaultProps 에는 history 객체가 들어가게됨
• history 객체를 사용하기 위해서는 withRouter hoc를 이용하여 컴포넌트를 감싸주어야 작동
• history 객체를 이용하여 리액트 어플리케이션 내에서 라우팅 가능

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

useLocation hook은 현재 URL 을 나타내는 location 객체를 반환한다.
사용자가 현재 머물러있는 페이지에 대한 정보를 알려준다.
URL 이 변경될 때마다 새 위치를 반환하는 useState 처럼 생각할 수 있다.

import { useLocation } from "react-router";

const Home=(props)=>{
  const location=useLocation();
  console.log(location.pathname); //출력 예: /topics/switch
  
  return (
    ...
  );
}
export default Home;

• pathname : url 이 http://localhost:3000/home?id=1 일때 /home 에 해당
• search : 쿼리스트링을 분석해야하는 상황에서 유용, pathname이 출력했던 부분을 제외한 쿼리스트링이 출력. ?id=1 에 해당

useParams

useParams hook 은 URL 로 전달받은 파라미터의 key/value 쌍의 객체를 반환한다.

• 기존에는 match props를 이용하여 match.params.id의 형식으로 접근을 해야 했지만, useParams를 이용하면 좀 더 간단하게 접근 가능

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from 'components/Home';

const App = (): JSX.Element => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path='/home/:id' component={Home} />
        {/* id라는 동적 라우팅값을 걸어주었다. */}
      </Switch>
    </BrowserRouter>
  );
};

export default App;

import React from 'react';
import { useParams } from 'react-router-dom';

const Home = () => {
  const { id } = useParams();
  // 동적 라우팅 값으로 걸어둔 이름으로 객체를 가져올 수 있다.
  
  // 현재 주소의 값이 http://localhost:3000/home/3 일때
  console.log(id); // "3"이 출력된다.
  
  return (
    <></>
  );
};

export default Home;

useRouteMatch

useRouteMatch hook은 match 객체의 값에 접근할 수 있게 해주는 hook이다

• Route 컴포넌트의 프로퍼티들(path, strict, sensitive, exact)을 가진 객체를 인자로 받는 방법으로, 만약 path 프로퍼티와 현재 페이지 URL이 일치할 경우 해당 path의 match객체를 반환하고 일치 하지 않으면 null을 반환해준다.

• 아무 인자도 넘겨주지 않고 hook을 호출하면 withRouter HoC로 match객체에 접근했을 때처럼 제일 가까운 부모 Route 컴포넌트의 match 값을 리턴해준다.

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 />;
}

로 대체할 수 있다.