[React]react-router-dom의 Outlet 사용

공부 중 너무 개쩔어서 정리

---

url이 다른 tab메뉴 만들기

두개의 tab메뉴가 있고 클릭에 따라 리로드 없이 다른 url과 컨탠츠를 보여주는 페이지

 

---

router 설정

/:coinId 자식으로 두개의 컴포넌트 추가

const router = createBrowserRouter([
    {
        path: "/",
        element: <App/>,
        children: [
            {
                path: "",
                element: <Coins/>,
            },
            {
                path: "/:coinId",
                element: <Coin/>,
                children: [
                    {
                        path: "chart",
                        element: <Chart/>,
                    },
                    {
                        path: "price",
                        element: <Price/>,
                    }
                ]
            }
        ],
        
    }
])

---

Outlet추가

Tab 메뉴 아래로 Outlet만 추가 하면 끝!

{/* 탭메뉴 */}
<Tabs>
	<Tab isActive={chartMatch !== null}>
  		<Link to={`/${coinId}/chart`}>Chart</Link>
	</Tab>
	<Tab isActive={priceMatch !== null}>
  		<Link to={`/${coinId}/price`}>Price</Link>
	</Tab>
</Tabs>

{/* 탭메뉴 컨탠츠 */}
<Outlet/>