[React Router] useHistory

react-router-dom의 hooks를 사용하여 경로를 설정해보자

사용할 hooks는 useHistory이다.

이전 글에서 사용한 예제에서 링크를 버튼으로 만든 뒤, onClick 이벤트를 걸어서 경로를 변경시킬 것이다.

이번에도 간단한 예제이므로 하나의 파일에서 작성해 보자

 

App.js

import React from "react";
import {
  BrowserRouter,
  Switch,
  Route,
  Redirect,
  useHistory,
} from "react-router-dom";

// App 컴포넌트
const App = () => {
  return (
    <BrowserRouter>
      <h1>Resume</h1>
      {/* Buttons 컴포넌트 */}
      <Buttons />
      <br></br>
      {/* 라우팅 */}
      <Switch>
        <Route exact path="/about" component={About} />
        <Route exact path="/skills" component={Skills} />
        <Route exact path="/projects" component={Projects} />
        <Route path="/" render={() => <Redirect to="about" />} />
      </Switch>
    </BrowserRouter>
  );
};

// useHistory 를 사용하는 Buttons 컴포넌트
const Buttons = () => {
  const history = useHistory();

  return (
    <div>
      <button onClick={() => history.push("/about")}>About</button>
      <button onClick={() => history.push("/skills")}>Skills</button>
      <button onClick={() => history.push("/projects")}>Project</button>
    </div>
  );
};

// 기타 컴포넌트들
const About = () => <div>This is About Component</div>;
const Skills = () => <div>This is Skills Component</div>;
const Projects = () => <div>This is Projects Component</div>;

export default App;

 

동작되는 화면은 다음과 같다.

각각의 버튼을 클릭할 때마다 컴포넌트가 변경되는 것을 확인할 수 있다.