-
React useParams() 사용법React/React 2023. 2. 23. 20:41
📌 Router.tsx
import { BrowserRouter, Routes , Route} from "react-router-dom"; import Coin from "./routes/coin"; import Coins from "./routes/coins"; function Router() { return ( <> <BrowserRouter> <Routes> <Route path="/" element={<Coins/>} /> <Route path="/:coinId" element={<Coin/>} /> // :coinId 는 const { coinId } = useParams() 를 통해 가져올 수 있다. // coin.tsx file 참고 </Routes> </BrowserRouter> </> ); } export default Router;
📌 coin.tsx file
import { useParams } from "react-router-dom" function Coin () { const {coinId}= useParams() console.log(coinId) return <> <h1>Coin {coinId}</h1> </> } export default Coin
'React > React' 카테고리의 다른 글
React Outlet 적용하기 (0) 2023.02.26 React 기본 css 제거하기 (0) 2023.02.25 React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom) (0) 2023.02.23 useEffect 에서 return 문을 왜 쓰이는걸까? (0) 2023.02.14 React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법 (0) 2023.02.07