繼上一篇介紹到的巢狀路由，今天要筆記的是一個實際路由會遇上的問題。通常產品列表資訊會在每個頁面出現，我們可以將每頁都貼上產品列表連結，但這很不效率，所以我們得把它變成一個Layout。

1. 建立ProductLayout(把原本放在Product的連結部分搬到這)

   export function ProductLayout(){
      return <>
       <Link to="/product/1">detail-1</Link>
       <br />
       <Link to="/product/2">detail-2</Link>
       <br />
       <Link to="/product/latest">latst</Link>
       <br />
     </>
   }
   

2. path="/product"之後加上element={<ProductLayout />}，到這個步驟可以看到在/product之下的分頁都共享一個ProductLayout

   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/product" element={<ProductLayout />}>
       <Route index element={<Product />} />
       <Route path=":id" element={<ProductDetail />} />
       <Route path="latest" element={<ProductLatest />} />
     </Route>
   </Routes>
   

3. 最後加上Outlet讓原先在子頁面中的內容顯示

   export function ProductLayout(){
      return <>
       <Link to="/product/1">detail-1</Link>
       <br />
       <Link to="/product/2">detail-2</Link>
       <br />
       <Link to="/product/latest">latst</Link>
       <br />
       <Outlet />
     </>
    }
   

這樣的做法就可以在每個/product之下的頁面都有一個ProductLayout，不用浪費時間在每一個子頁面複製貼上ProductLayout，也讓這個layout更好維護。

附上範例連結