💡 React Router 설치

📎 React Router

$ npm install react-router-dom

💡 React Router 사용

1. 라우터 컴포넌트

라우팅 기능을 사용하려면 라우터 컴포넌트 import 하기

가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter 있음

• BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지
• HashRouter 해시 주소를 감지

// App.js
// BrowserRouter import
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
      <BrowserRouter>
        <Header />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="Checkout" element={<Checkout />} />
        </Routes>

      </BrowserRouter>
  );
}

export default App;

• BrowserRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
• Routes : 자식 route들을 구성하고 있는 단위
• Route : path를 통해 URL을 분기시킬 수 있음, 중첩해서 사용가능(중첩 라우팅)

2. Link 컴포넌트

a 태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 않음
페이지를 갱신하지 않고 렌더링 방식으로 이동하려면 Link 컴포넌트 사용

import { Link } from 'react-router-dom';

<Link to="경로">링크명</Link>

작성중 ...