Link: a태그 대신 링크를 하고 싶을 때 useNavigate : 이벤트가 발생 하면서 이동 하고 싶을때
Link
a태그 대신 클라이언트 사이드 렌더링 방식을 사용 할 때 사용, a태그 사용하면 서버 사이드 렌더링 됨
import "./App.css";
//Link를 import 해주고
import { Route, Routes, Link } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import NotFound from "./pages/NotFound";
function App() {
return (
<>
//아래처럼 Link태그에 렌더링하고싶은 페이지를 작성해 놓고 클릭하면 Routes
위에서 아래로 path를 확인하면서 to에 해당하는 컴포넌트를 렌더링 한다.
<div>
<Link to={"/"}>Home</Link>
<Link to={"/new"}>New</Link>
<Link to={"/diary"}>Diary</Link>
</div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="*" element={<NotFound />} />
</Routes>
</>
);
}
export default App;
useNavigate
링크가 아닌 함수 호출이나 이벤트가 발생 했을 때 원하는 페이지를 렌더링 하고 싶을때
import "./App.css";
//useNavigate선언
import { Route, Routes, Link, useNavigate } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import NotFound from "./pages/NotFound";
function App() {
//useNavigate객체를 nav에 넣어줌
const nav = useNavigate();
// 버튼 킬릭시 nav객체에 가고싶은 path를 넣어주면 Routes를 읽어가며 일치하는 path를 확인 후 컴포넌트를 뿌려줌
const onClickButton = () => {
nav("/new");
};
return (
<>
<button onClick={onClickButton}>New</button>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="*" element={<NotFound />} />
</Routes>
</>
);
}
export default App;
