Router-Dom이란

react-router-dom이란?

-여러 페이지를 구현할 수 있게 해주는 패키지

설치방법
터미널에 yarn add react-router-dom

1. Router.js 생성 및 route 설정 코드 작성

: 브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분이다.

(1) src안에shared 라는 폴더를 생성 후 Router.js 파일 생성

(2) Router.js에 아래의 코드 삽입

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

(3) App.jsx에 Router.js import 하기

import Router from './shared/Router';   

function App() {
  return (
    <></>
  );
}

export default App;

주의사항

• Router.js import할 때 react-router-dom 자체에서 제공하는 "react-router-dom"이 아니라 현재 우리가 만든 Router.js를 가져와 import 해야 한다.
  ex) /shared/Router
• Router.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문이다.

react-router-dom Hooks 종류

useNavigate
: 어떤 버튼을 누르면 페이지로 이동하거나 또는 어떤 컴포넌트를 눌렀을 때 페이지를 이동
navigate(’보내고자 하는 url’)

useLocation
: 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있습니다.

Link
:Link 는 훅이 아니지만, 꼭 알아야 할 API라서 소개합니다.
:Link 는 html 태그중에 a 태그의 기능을 대체하는 API 입니다. 만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 합니다. 왜냐하면 a 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문입니다.
Link는 새로고침이 되지 않는다.
이 밖에도 URL를 사용하는 useParas 존재(자습)