今天也是繼續練習 router 設定的部分，如果還沒有做過 [Day 16 的練習](https://hackmd.io/-uadf3ZSRxmy9iv-OFI4_w?view)，建議先完成 Day 16 的任務，再繼續今日的任務練習哦！

今日重點要來練習『動態路由』的部分，動態路由常用在詳細資料頁面，例如： `/post/:postId` 這邊的 `postId` 就會帶上文章的 ID，在進入此頁面後透過 id 取得文章的所有內容並顯示在畫面上。除此之外，像是商品的介紹頁面也是相同的道理，所以取得動態路由的用法是很常見的，今天就來一起練習一下吧～～

### Route 設定
在路由設定上可以用巢狀的方式定義，例如：

<Route path="users">
  <Route path=":userId" element={<ProfilePage />} />
</Route>

在巢狀路由中的父層，也就是 `path="users"` 這層，也可以加入元件做為此路由的 Layout，例如：

<Route path="users" element={<Users />}>
  ...
</Route>

這邊的父層元件就要加上 `<Outlet />` 來渲染在它之下的子路由元件。

const Users = () => {
  return <div>
    <h3>使用者詳細資料</h3>
    <Outlet />
  </div>
}

而子路由 `path=":userId"` 這層，使用動態路由的方式設定（`:` 後面加入自定義名稱 userId），當路由為 `/users/U17230283`，就可以在 ProfilePage 元件中，透過 `useParams` 取得路由參數。

const ProfilePage = () => {
  let params = useParams();
  return <p>UserID: {params.userId}</p>;
}

### 補充

[useParams() 文件參考](https://reactrouter.com/en/main/hooks/use-params#useparams)
[Outlet 文件參考](https://reactrouter.com/en/main/components/outlet)

## 題目
1. 在 App.js 設定路由一個 Post 的巢狀路由，有父層 `/post` 路由以及子動態路由 `/:postId`
2. 定義 Post 和 PostId 兩個元件，分別會看到 Post 詳細資料頁面、點入 `/:postId` 路由會顯示 Post ID 是 xxxx。
3. 加上 `NavLink`，讓使用者可以直接點擊查看這些頁面。

範例圖：

## 回報流程
將答案寫在專案的 App.js 中，並將完成的內容放到 GitHub 上，複製 App.js 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

const Post = () => {
  return (
    <div>
      <h3>Post 頁面</h3>
      <Outlet />
    </div>
  );
};
const PostId = () => {
  let params = useParams();
  return <p>Post: {params.postId}</p>;
};

<NavLink to="/post">
  <p>Post 頁面</p>
</NavLink>
<NavLink to="/post/post123">
  <p>Post 詳細頁面</p>
</NavLink>

<Routes>
  // 新增 post 的路由設定
  <Route path="/post" element={<Post />}>
    <Route path=":postId" element={<PostId />} />
  </Route>
</Routes>

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:-----------------:|:---------------------------------------------------------------------------:|
| 01 | collinkao | [GitHub](https://github.com/collin0825/2023-react-daily-task-router/blob/main/src/App.jsx)
| 02 | 翔.(Ben) | [CodeSandBox](https://codesandbox.io/s/react-router-test-6yg5rk?file=/src/App.js)
| 03 | AYA | [CodeSandBox](https://codesandbox.io/p/github/study-hex/2023-react-daily-task-router/feature/day18) |
| 04 | David0799 | [GitHub](https://github.com/David07994415/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 05 | Billy.Ji | [GitHub](https://github.com/yaj55billy/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 06 | Wendy3 | [GitHub](https://hackmd.io/x_t0BCm9SOeljsvTYGKhIQ?edit) |
| 07 | Ataraxia | [GitHub](https://github.com/QuantumParrot/2023-Hexschool-React-Workshop-Daily-Task-Router/blob/main/src/App.jsx) |
| 08 | Leo | [GitHub](https://github.com/Aruminiya/Day18_ReactRouterDynamicRouting/blob/main/src/App.jsx) |
| 09 | Kaya | [GitHub](https://github.com/Laron9486/2023-react-daily-task-router/blob/a2e65d0fe1c55c935497d7a7359976c326f773ea/src/App.jsx) |
| 10 | Aden | [GitHub](https://github.com/spikesandmaen484/20230830ReactRouter/blob/main/src/App.jsx) |
| 11 | jasperlu005 | [GitHub](https://github.com/ja5perlu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 12 | Wei_Rio | [GitHub](https://github.com/wei-1539/React-18dayWork/blob/main/src/App.jsx) |
| 13 | 羅羅 | [GitHub](https://github.com/bjqs02/2023-react-daily-task-router/blob/3f04d0dc0deeeea6548b3803b9e8a02c8978f563/src/App.jsx) |
| 14 | 地球儀 | [GitHub](https://github.com/dayday1222/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 15 | cataska | [GitHub](https://github.com/cataska/2023-react-daily-task-router/blob/d57bce41a1d6c9b497563c1b43dc4984f3f589d1/src/App.jsx) |
| 16 | yuchih| [GitHub](https://github.com/hijachu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 17 | Yen | [Codepen](https://github.com/tzuhuangyen/React-router) |
| 18 | 黃士桓 | [codeSandbox](https://codesandbox.io/p/github/huan5678/2023-react-daily-task-router/main) |
| 19 | LinaChen | [Codepen](https://github.com/Lina-SHU/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 20 | curry | [Codepen](https://codesandbox.io/p/sandbox/router-dong-tai-lu-you-x7dws6?file=/src/App.tsx:87,22) |
| 21 | 金魚 | [Codepen](https://github.com/CSO-TW-GoldFish/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 22 | 瑀君 | [GitHub](https://github.com/yanennnnn/2023-react-daily-task-router/blob/c97f39c62ac64b5076dc0d16e85299040d84518a/src/App.jsx) |
| 23 | Iris | [GitHub](https://github.com/iris831206/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 24 | 喃喃 | [GitHub](https://github.com/VeLarioCream/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 25 | 精靈 | [GitHub](https://github.com/sky030b/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 26 | JJ Wu | [GitHub](https://github.com/jesswu1551/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 27 | Ingrid | [GitHub](https://github.com/Ingrid-chi/2023_react_daily_task_router/blob/main/src/App.jsx) |
| 28 | Cami | [GitHub](https://github.com/fayevivi/2023-react-daily-task-router/blob/main2/src/App.jsx) |
| 29 | PollyPO_Lee | [GitHub](https://github.com/pollyPO1986/2023-react-daily-task-router/blob/main/src/App.jsx) |

<!-- 快速複製

| 00 | user | [Codepen]() |

-->