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

今日重點要來練習『動態路由』的部分，動態路由常用在詳細資料頁面，例如： `/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 / 答案 |
|:-:|:-----------------:|:---------------------------------------------------------------------------:|
| 1 | Noy(Toad) | [Github](https://github.com/MochiTree/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 2 | LinaChen | [Codepen](https://github.com/Lina-SHU/2025-react-daily-task-router/blob/main/src/App.jsx) |
| 3 |邵|[GitHub](https://github.com/oxfoxlion/ReactRouter_DailyTask/blob/main/src/App.jsx)|
| 4 |Johnson|[GitHub](https://github.com/tttom3669/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 5 |Kaya|[GitHub](https://github.com/kayaribi/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 6 |Sonia|[GitHub](https://github.com/yujouwu/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 7 | jinliu214 | [GitHub](https://github.com/jinliu214/2025-react-daily-task-router/blob/main/src/App.jsx) |

<!-- 快速複製

| 00 | user | [Codepen]() |

-->