라우터 구현 react-router-dom

1. router 설치

npm install react-router-dom

import

import {BrowserRouter, Routes, Route} from 'react-router-dom';

BrowserRouter, Routes, Route

BrowserRouter: .App 전체를 감싸기
Router: Router 안에 있는 Route는 url에 따라 각각 다른 페이지를 보여줌

양식

<BrowserRouter>
  <Routes>
  	<Route path="이동url" element={<이동컴포넌트 />}></Route>
  </Routes>
</BrowserRouter>

예시

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header /> //모든 페이지에 공통으로 노출
        <Routes>
          <Route path="/" element={<DayList />}></Route>
          <Route path="/day/:day" element={<Day />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

2. Link to

• react에서는 링크 이동 시 a태그 대신 Link to를 사용함
• 새로고침 없이 이동 가능
• Link를 사용하는 컴포넌트는 BrowserRouter로 감싸져있어야 함.
• 외부 사이트로 이동할 때는 a 태그를 사용

import { Link } from "react-router-dom"

export default function DayList(){
  return <Link to="/day">Day</Link>
}

3. useParams

<Route path="/day/:day" element={}>
:요소: useParams()을 호출했을 때 현재 url 중 :요소 위치에 해당하는 값을 불러와줌.

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

const day = useParams().day;
console.log(day) // url 중 :day 위치에 해당하는 값