react-router-dom 다루기

1. 설치 :

npm install react-router-dom

 

2. src/index.js 에 import.

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

 

3. ReactDOM 에 <BrowserRouter> 코드

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

<BrowserRouter> 와 <HashRouter>의 큰 차이점은 주소창에 # 버튼이 있냐 없냐의 차이가 있다. 주소창에 #이 있으면 서버에 요청을 할 수 없다. 즉, 안전하게 리액트 라우터를 다루고 싶을 때 HashRouter 를 쓰게 된다. 반면 백엔드와 함께 작업할 일이 있을 경우 BrowserRouter을 쓴다고 한다.

 

4. App.js 에 react-router-dom에 대한 컴포넌트들 import

import { Link, Route, Switch } from "react-router-dom";

 

5. Route 컴포넌트

path를 사용하여 마치 페이지를 이동하는 것처럼 보이게 한다. (실제로는 같은 HTML 문서 안에서 갈아치우는 것이다)

      <Route exact path="/">
        ...
      </Route>

Route에 exact를 적어주어야 path가 겹치지 않는다.

 

6. Link 컴포넌트

페이지 이동을 시켜주는 버튼 같은 역할. a 태그의 href 속성과 비슷하다.

<Link to="/">Home</Link>

<Link to="경로"></Link>

 

  <Nav.Link>
    <Link to="/">Home</Link>
  </Nav.Link>
  <Nav.Link>
    <Link to="/detail">Detail</Link>
  </Nav.Link>

 

7. useHistory 컴포넌트

react-router-dom 이 제공해주는 컴포넌트.

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

function Detail() {
  let history = useHistory();
 }

history라는 오브젝트를 쓸 수 있는데, 과거 방문했던 url을 모두 담았다고 생각하면 된다.

간단하게 뒤로가기 버튼을 만들고 싶을 경우, history.goBack(); 이런 식으로 쓰면 작동한다.

          <button
            className="btn btn-danger"
            onClick={() => {
              history.goBack();
            }}
          >
            뒤로가기
          </button>

 

특정 경로로 가고 싶을 경우, push('경로')  사용

          <button
            className="btn btn-danger"
            onClick={() => {
              history.push(/);
            }}
          >
            특정경로
          </button>

 

 

8. Switch 컴포넌트

<Route path="/:id">
  <div>여긴 어떻게 오셨나요?</div>
</Route>

 

path="/:id"

 

는 url의 파라미터인데, 모든 경로라고 생각하면 쉽다. 

 

이것을 적어주면 없는 페이지를 들어갔을 경우 이 페이지를 보여줄 수 있다. 하지만 path="/:id"가 모든 경로이니만큼 다른 라우터에서도 이 페이지를 보여주게 된다. 그러므로 하나의 라우트당 하나의 페이지만 보여주기 위해 <Switch> 컴포넌트를 사용한다.

 

  <Switch>  
    <Route path="/detail">
      <Detail />
    </Route>
    <Route path="/:id">
      <div>여긴 어떻게 오셨나요?</div>
    </Route>
  </Switch>

 

중복 매칭을 허용하지 않는 Switch

 

 

9. useParams 컴포넌트

 <Route path="/detail/:id">

상세 페이지 안에, 숫자로 구분하는 방법

쇼핑몰 같은 사이트를 보면 숫자로 구분하게 되는데, 이를 :id를 사용할 수 있다.

 

이를 응용한다면 어떤 데이터의 배열을 뱉어낼 때 아래와 같은 코드를 쓸 수 있다.

<h4 className="pt-5">{props.shoes[:id자리에 있던 숫자].title}</h4>

 

그렇다면 라우트의 id를 어떻게 전달할 것인가?

 

이때 react-router-dom이 제공해주는 useParams 훅을 사용한다.

사용법은 다음과 같다.

 

  let { id, id2, id3 } = useParams();  

 

 

useParams 함수를 쓰는 순간 (보이지 않는) 중괄호가 생긴다. 중괄호 안에는 {사용자가 입력한 URL 파라미터들 } 이 담겨있다. (useState는 쓰는 순간 보이지 않는 대괄호가 생기는 것과 같다.)

 

예를 들어, 사용자가 www.어쩌구/detail/1 을 검색했다고 가정한다면 1 이라는 숫자가 id 에 저장이 되는 것이다.