-
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-router 'Outlet' 사용하여 레이아웃 구성하기
에러 마주하기 로그인 기능을 구현하는 와중 로그인이 성공적으로 되었을 때 특정 루트로 이동하는 코드를 작성하였다. 이 코드에서의 문제점은 Routes 가 나누어져 있기 때문에 로그인컴포넌트
velog.io
'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