라우팅

의존성 주입
yarn add react-router-dom

App.js 에서 라우팅

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./Main";
import Temp from "./Temp";

function App() {
  return (
    <div>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Main />} />
                <Route path="/temp" element={<Temp />} />
            </Routes>
        </BrowserRouter>
    </div>
  );
}

export default App;

• 이 상태에서도 주소창에 path 입력 시 이동.

페이지 이동 2가지 방법

useNavigate 사용 (버튼 온클릭 함수 사용)

Main.js

import { useNavigate } from "react-router-dom";

export default function Main() {

    const navigate = useNavigate();
    const goTempPage = () => {
        navigate("/temp");
    }
  return (
    <div>
      <div>메인 페이지</div>
      {/* <Link to={"/temp"}>임시 페이지로 이동</Link> */}
      <button onClick={goTempPage}>임시 페이지로 이동</button>
    </div>
  );
}

Link to 태그 사용

Temp.js

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

export default function Temp() {
  return (
    <div>
      <div>임시 페이지</div>
      <Link to={"/"}>메인 페이지로 이동</Link>
    </div>
  );
}