[React] Router : router, link

React Router 설치

npm install react-router-dom@6

사용법

라우팅 기능을 사용하기 위해 BrowerRouter 컴포넌트를 최상위 태그에 감싸준다.
앱에서 단 하나의 라우터만 사용해야 한다.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Exhibition from './pages/Boards/Exhibition/Exhibition';
import Art from './pages/Boards/Art/Art';
import Artist from './pages/Boards/Artist/Artist';
import Gallery from './pages/Boards/Gallery/Gallery';
import About from './pages/Boards/About/About';

function App() {
  return (
    <BrowserRouter>
      <div className='App'>
        <Navbar />
        <Routes>
          <Route path='/exhibition' element={<Exhibition />} />
          <Route path='/art' element={<Art />} />
          <Route path='/artist' element={<Artist />} />
          <Route path='/gallery' element={<Gallery />} />
          <Route path='/about' element={<About />} />
        </Routes>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

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

링크 이동하기

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

const Navbar = () => {
  return (
    <div className='Navbar'>
      <div className='navbar_menu'>
            <Link to='/exhibition'>EXHIBITION</Link>
            <Link to='/art'>ART</Link>
            <Link to='/artist'>ARTIST</Link>
            <Link to='/gallery'>GALLERY</Link>
            <Link to='/about'>ABOUT</Link>
      </div>
    </div>
  );
};

Route : 특정 주소에 컴포넌트 연결하기
Link : 누르면 다른 주소로 이동