[react-router-dom]

react-router-dom?
리액트에서 페이지 간 이동 시 사용

아래 예시 참고 : https://v5.reactrouter.com/web/example/basic

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

export default function BasicExample() {
  return (
    <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/dashboard" component={Dashboard} />
        </Switch>
    </Router>
  );
}

 

react-router-dom 설치
npm install react-router-dom --save

라우터란?
path속성으로 자신이 원하는 URL주소를 만들고 그 해당 URL에 들어갈 컴포넌트 지정할 수 있다.

• BrouwserRouter
  • URL과 UI를 동기화해주는 라우터
  • History API를 사용해 페이지를 새로고침 없이 주소 변경이 가능하게 함.
  • 관련 정보를 prop로 쉽게 조회 및 이용 가능
• Switch
  • Route로 생성된 자식 컴포넌트 중 매칭되는 첫번째 Route를 렌더링 한다.
  • 사용하지 않는다면 메인페이지("/")이동을 위해 접속을 했는데
    "/"가 포함된 "/about", "/dashboard"컴포넌트가 다 렌더링 되는 경우가 생긴다.
  • react-router-dom 버전이 6으로 업데이트 되면서 Switch를 더 이상 지원하지 않는다.
    
    • Switch -> routes
• Route
  • 컴포넌트에 path속성을 이용해 원하는 url을 지정
  • 그 url에 접속하면 해당 컴포넌트만 렌더링 된다.
• Link
  • a 요소와 비슷한 개념
  • 지정한 url로 이동이 되게끔 해준다.
• exact
  • 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여준다.
  • switch가 나오기 전 사용한 방법
  • 문제점
    • path가 없는 컴포넌트(에러 페이지 등)를 구현 시
      에러가 발생하지 않음에도 불구하고 해당 컴포넌트가 어떠한 URL에도 렌더링된다.
      => Switch 등장
• component
  • prop으로 component를 넣게되면 렌더링 할 때마다 새로운 컴포넌트를 만들게 된다.
  • react-router-dom 버전이 6으로 업데이트 되면서 Switch를 더 이상 지원하지 않는다.
    • component -> element

 

[참고]

https://velog.io/@hoon_dev/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0Route-Link-Switch-5

https://baeharam.netlify.app/posts/react/why-switch-is-needed