[React] React Router/ Hook (useHistory())

 

라우팅이란?

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. 

리액트에서는 라우팅 관련 라이브러리가 많이 있지만 그중 리액트 라우터(React Router)에 대해 아주 간략히 다뤄보겠다.

 

 

 

SPA(Single Page Application)

리액트는 SPA방식이다. 

- 기존 웹 페이지 처럼(MPA 방식) 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. 

- 주소를 옮길 때 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.(하나의 html으로 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. )

 

React-Router는 이런 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리라고 볼 수 있다. 

---

라우팅 처리

패키지 설치 ( yarn add react-router-dom@5.2.1 ) 

 

1. index.js에 BrowserRouter 적용

웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨준다. 

 

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

ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  document.getElementById("root")
);

 

 

2. App.js 

-  import Route 

-  exact 사용해 "/" 이후 경로 포함시키지 않기 

-  useHistory Hook 사용  (. push("/home"),. goback() )

-  NotFound.js 생성 + import Swich

정하지 않은 주소로 들어갔을 경우 대비, 

NotFound component를 Route에 주소 없이 연결해준다. 

 

import React from "react";
import { Route, Switch } from "react-router-dom";
import NotFound from "./NotFound";


function App() {
  return (
    <div className="App" style={{ maxWidth: "350px", margin: "auto" }}>
      <Switch>
        <Route path="/" exact>
          <Home />
        </Route>
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

 

 

-  useHistory Hook 사용해서 페이지 이동  (.push("/home"), .goback() )

 

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

const Home = (props) => {
  const history = useHistory();
  return (
    <>
      <button
        onClick={() => {
          history.push("/contact");
        }}
      >
        contact page
      </button>
    </>
  );
};

export default Home;