051. React - 페이지 라우팅 - 페이지 이동

Link로 이동시키는 법

1. Link 컴포넌트 import하기

// App.jsx
import { Routes, Route, Link } from "react-route-dom";

2. return문 내부에서 link 컴포넌트 호출하기

function App() {
  return (
    <>
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/diary"}>Diary</Link>
        <Link to={"/detail"}>Detail</Link>
      </div>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="/detail" element={<Detail />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  );
}

Button으로 이동시키는 법

1. useNavigate 훅 import 하기

// App.jsx
import { Routes, Route, useNavigate } from "react-route-dom";

2. useNavigate 훅을 변수로 초기값 할당하기

function App() {
    const nav = useNavigate();

    return();
}

3. 선언한 변수를 활용해서 이벤트 핸들러 함수 정의하기

function App() {
    const nav = useNavigate();

    const onClickButton = () => {
        nav("/new");
    };

    return();
}

4. 이벤트 핸들러 함수를 버튼에 이벤트 핸들러로 바인딩하기

function App() {
    const navigate = useNavigate();

    const onClickButton = (path) => {
        navigate(path);
    };

    return(
        <>
        <div>
            <button onClick={() => onClickButton("/")}>Home으로</button>
            <button onClick={() => onClickButton("/diary")}>Diary로</button>
            <button onClick={() => onClickButton("/detail")}>Detail로</button>
        </div>
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/diary" element={<Diary/>} />
            <Route path="/detail" element={<Detail/>} />
            <Route path="*" element={<Notfound/>} />
        </Routes>
        </>
    );
}