-
React Outlet 적용하기React/React 2023. 2. 26. 01:19
📌 하나의 컴포넌트에서 2개이상의 탭 컴포넌트를 이용하고 싶다.
Router.tsx
function Router() { return ( <> <BrowserRouter> <Routes> <Route path="/" element={<Coins />} /> // 아래와 같이 중첩 Route 를 이용하면 된다. /:coinId/price 이런식이다. <Route path="/:coinId" element={<Coin />}> <Route path="price" element={<Price />} /> <Route path="chart" element={<Chart />} /> </Route> </Routes> </BrowserRouter> </> ); } export default Router;
이후 <Coin /> 컴포넌트 내부에서 price 혹은 chart 를 이용하고 싶은 layout 위치에 <Outlet /> 을 추가하면 된다.
참고자료를 보면 조금 더 쉽게 이해할 수 있다.
'React > React' 카테고리의 다른 글
useState 바로 뒤에 console.log 를 했더니 이전 값이 나온다.(혹은 비어있다) (0) 2023.03.07 React 기본 css 제거하기 (0) 2023.02.25 React useParams() 사용법 (0) 2023.02.23 React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom) (0) 2023.02.23 useEffect 에서 return 문을 왜 쓰이는걸까? (0) 2023.02.14