포스코DX X 비트교육센터 6기 - Router

HashRouter VS BrowserRouter

import React from 'react';
import {BrowserRouter, HashRouter} from 'react-router-dom';
import {Routes, Route} from 'react-router';
import Main from "./component/Main";
import Gallery from "./component/Gallery";
import Guestbook from "./component/Guestbook";

export default function App() {
    return (
        /*
        <HashRouter>
            <Routes>
                <Route path={'/'} element={<Main />} />
                <Route path={'/gallery'} element={<Gallery />} />
                <Route path={'/guestbook'} element={<Guestbook />} />
            </Routes>
        </HashRouter>
        /*/
        <BrowserRouter>
            <Routes>
                <Route path={'/'} element={<Main />} />
                <Route path={'/gallery'} element={<Gallery />} />
                <Route path={'/guestbook'} element={<Guestbook />} />
            </Routes>
        </BrowserRouter>
        //*/
    );
}

HashRouter

http://example.com/#/products와 같은 형태의 URL을 사용
서버 측 라우팅이 필요하지 않으므로 정적 호스팅 환경에서 쉽게 구현

BrowserRouter

http://example.com/products와 같은 형태의 URL을 사용
일반 URL을 사용하면 더 깔끔하고 직관적인 URL을 제공
서버 측 라우팅 설정이 필요 - 서버 설정을 제대로 하지 않으면 서버에서 해당 URL로 직접 접근하였을 때 404 에러가 발생

Link VS NavLink

import React from "react";
import { Link, NavLink } from "react-router-dom";

export default function Main() {
  return (
    <div>
      <h1>Main</h1>
      {/* <ul>
        <li>
          <Link to={"/"}>[Main]</Link>
        </li>
        <li>
          <Link to={"/guestbook"}>[Guestbook]</Link>
        </li>
        <li>
          <Link to={"/gallery"}>[Gallery]</Link>
        </li>
      </ul>
      <ul>
        */}
      <ul>
        <li>
          <NavLink to={"/"}>[Main]</NavLink>
        </li>
        <li>
          <NavLink to={"/guestbook"}>[Guestbook]</NavLink>
        </li>
        <li>
          <NavLink to={"/gallery"}>[Gallery]</NavLink>
        </li>
      </ul>
    </div>
  );
}

Link

일반 하이퍼링크를 생성
클릭할 때 브라우저가 페이지를 새로고침하지 않고도 라우터가 관리하는 컴포넌트 간 전환
특별한 스타일을 지정하거나 클래스를 추가하려면 직접 작업

NavLink

현재 활성화된 링크에 대한 스타일링을 자동으로 처리하는 기능을 제공 (스타일 쉽게 처리 가능)
activeClassName 및 activeStyle 속성을 사용하여 현재 활성화된 링크에 대한 클래스나 스타일을 설정 가능

//예시
  <NavLink to="/home" activeClassName="active">Home</NavLink>