⭐任務說明

😸 來看看什麼是巢狀路由！

簡單介紹

在網頁頁面的設計上，除了會有一般的多個頁面之外，在頁面當中其裡面也會有多個頁面需要呈現。
通常會在大型系統中會遇到

像是會有 dashboard/list、dashborad/setting 等等之類的頁面

巢狀路由怎麼做

• 在前一個任務中，學習到路由的建立是使用 <Routes>...</Routes>包起來，每一個路由就是 <Route>

• 如果要巢狀的話，就在會有子連結的那一個項目中，再新增一個 <Route>

• 像是這麼做

<Route path="/about" element={<About />}>
   <Route path="area" element={<AboutArea />} />
 </Route>

再來要修改一下原本的 About 元件，裡面要設定 Link ，讓他指向 area ，並且要再加上 `

要使用 <Outlet /> 需要先引用

function About() {
  return (
    <div>
      <h1>關於我們</h1>
      <Link to="area">area</Link>
      <Outlet />
    </div>
  );
}

結果如下

結語

今天學習使用巢狀 Router ，學會了嗎？
React Router 16 版本的寫法好多不一樣呢～