동적 경로란 페이지가 렌더링 될 때, 동적으로 바뀌고있는 url을 말한다. 이것도 두가징 방법이 있다.
1. URL Parameter
위 이미지 같이 /뒤에 아이템의 id를 명시하는 것이다. 이때는
import "./App.css";
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 (
<>
<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 />} />
//이렇게 reactRoute에 path에다가 /:이동할값이름 을 설정해 준 뒤
<Route path="/diary/:id" element={<Diary />} />
<Route path="*" element={<NotFound />} />
</Routes>
</>
);
}
export default App;
// useParams를 import해준 다음
import { useParams } from "react-router-dom";
//useParams 객체를 변수에 담아 준 뒤, params.받을값이름으로 사용해 준다.
const Diary = () => {
const params = useParams();
return <div>{params.id}번 페이지 입니다.</div>;
};
export default Diary;
Query string
쿼리 스트링을 사용 할 때는 우리가 흔히 아는 get방식이다. url뒤에 /?변수명=값 의 식으로 전달하게 되는데 이거는 route에 뭔가를 해 줄 필요도 없다.
//useSearchParams를 호출한 다음
import { useSearchParams } from "react-router-dom";
const Home = () => {
//아래처럼 배열에 넣어준뒤 그냥 params.get(변수명)
//을 해주면 된다.
const [params, setParams] = useSearchParams();
console.log(params.get("value"));
return <div>Home</div>;
};
export default Home;
