React Router
React Router install 방법
npm i react-router-dom
치면된다.
main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
BrowserRouter 를 임포트 하여 App컴포넌트를 감싸준다.
BrowserRouter 는 브라우저의 현재 주소를 저장하고 감지하는 역할을 한다.
App.jsx
import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
</Routes>
);
}
export default App;
이렇게 넣어주면
페이지 라우팅을 할 수 있게된다.
잘못된 경로로 접근했을 때
const Notfound = () => {
return <div>잘못된 페이지입니다.</div>;
};
export default Notfound;
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="*" element={<Notfound />} />
</Routes>
path에 *넣어주게되면 지정된 경로외 Notfound컴포넌트가 렌더링되게 할 수 있다.
Link
페이지를 이동할 때사용하는 리액트 훅
import "./App.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Notfound from "./pages/Notfound";
function App() {
return (
<>
<div>
<Link to={"/"}>Home</Link>
<Link to={"/Diary"}>Diaryome</Link>
<Link to={"/New"}>New</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;
Link 태그를 누르게 되면 지정해둔 주소로 페이지가 렌더링 되게된다.
버튼을 누르면 링크 이동이 되야하게 구현할때
import "./App.css";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Notfound from "./pages/Notfound";
function App() {
const nav = useNavigate();
const onClickButton = () => {
nav("/new");
};
return (
<>
<div>
<Link to={"/"}>Home</Link>
<Link to={"/Diary"}>Diaryome</Link>
<Link to={"/New"}>New</Link>
</div>
<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;
useNavigate 훅을 사용해서
const nav = useNavigate();
const onClickButton = () => {
nav("/new");
<button onClick={onClickButton}>New 페이지로 이동</button>
버튼에 온클릭이벤트로 만들어 사용하면 된다.
동적 경로 를 조회 할때
~/product/1, ~/product/2, ~/product/3 ....
등처럼 index별로 렌더링할 페이가 다를 경우처럼 동적인 데이터를 포함있는 경로를 조회할때
~/product/1, ~/product/2, ~/product/3 .... 처럼 URL Parameter 방식과,
~/search?q="검색어" 처럼 Query String방식이 있다.
URL Parameter - 방식은 아이템의 id등의 변경되지 않는 값을 주소로 명시하기 위해 사용됨
Query String - 방식은 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용됨
URL Parameter
<Route path="/diary/:id" element={<Diary />} />
path 경로 뒤에 /:id URL 파라미터를 의미하는 값이다 라고 명시를 해줘야 한다.
import { useParams } from "react-router-dom";
const Diary = () => {
return <div>Diary</div>;
};
export default Diary;
import { useParams } from "react-router-dom"; // 임포트 해줘야한다.
usePatamse 훅은 경로 뒤에붙은 파라미터를 가지고오는 역할을 한다.
import { useParams } from "react-router-dom";
const Diary = () => {
const params = useParams();
console.log(params);
return <div>Diary</div>;
};
export default Diary;
params 변수에 담긴 id 값을 console에 출력 해보면
오브젝트형태로 id 1이 담겨있는걸 확인할수 있다.
Query String
import { useSearchParams } from "react-router-dom";
const Home = () => {
const [params, setParams] = useSearchParams();
return <div>Home {params.get("value")}</div>;
};
export default Home;
useSearchParams 를 임포트 해주고
state 변수 선언하는것 처럼 useSearchParams() 함수를 받아주게되면
params에는 값이 들어오게되고 setParams에는 params를 변경할수 있는 함수가 들어오게된다.
쿼리값으로 들어온 value 값을
{params.get("value")} 이렇게 화면에 렌더링 해주면 된다.