---
tags: 2022 React 新手讀書會
---
# 🏅 Day 15 ｜React Router 動態路由
今天也是繼續練習 router 設定的部分，如果還沒有做過 [Day 13 的練習](https://hackmd.io/VqEGaLa7TAW41hKsWZp4kA?view)，建議先完成 Day 13 的任務，再繼續今日的任務練習哦！

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

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

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

這樣的話，當路由為 `/users/U17230283`，就可以在 ProfilePage 元件中，透過 `useParams` 取得路由參數。

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

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

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

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

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

[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 / 答案 |
|:------------------:|:-----------------------------------------------------------------------------------------------------------------:|
| Rice#8043 | [GitHub](https://github.com/riceball-tw/Day-15-React-Dynamic-Router/blob/main/src/App.js) |
| yunyun#5215 | [GitHub](https://github.com/yunniyunyun/react-daily-task-router/commit/e240e83b1a6ab116983569b63e4e3f1c2ca80245) |
| DIANAxAKKO#4298 | [GitHub](https://github.com/redfire29/react-daily-task-router/blob/main/src/App.js) |
| 布魯諾#7239 | [GitHub](https://github.com/Bruno-Yu/react-daily-task-router/blob/main/src/App.js) |
| Ayre#0016 | [GitHub](https://github.com/not8311/react-daily-task-router/blob/main/src/App.js) |
| HedgehogKU | [GitHub](https://github.com/HedgehogKUCC/react-daily-task-router/commit/3a6fe8d2fed9ba2bbf8dcf9e96f3382c210b37a2) |
| LinaChen#1796 | [GitHub](https://github.com/Lina-SHU/React_Router_Task/blob/master/src/App.js) |
| Dylan_Lin#7320 | [GitHub](https://github.com/k06132001/reactrouter/blob/master/src/App.js) |
| Evonne#7078 | [GitHub](https://github.com/hsuifang/react-daily-task-router/blob/main/src/App.js) |
| JC#8658 | [GitHub](https://github.com/jcsamoyed/react-daily-task-router/blob/main/src/App.js) |
| aki | [GitHub](https://github.com/aki168/react-router-test/blob/main/src/App.js) |
| SHIN#6075 | [GitHub](https://github.com/Shin9626/react-daily-task-router/blob/main/src/App.js) |
| aka 南港鮪杰蛋寶包 | [github](https://github.com/weiyi-li00/react-daily-task-router/blob/main/src/App.js) |
| RON#2813 | [GitHub](https://github.com/ronchang8215/react-daily-task-router/blob/main/src/App.js) |
| yuyu#6310 | [GitHub](https://github.com/yuyu0905/react-daily-task-router/blob/main/src/App.js) |
| rainbow#3329 | [GitHub](https://github.com/superRainbow/react-daily-task-router/blob/main/src/App.js) |
|VadaChen#2055|[GitHub](https://github.com/astrolexa/reactDaily13_Router/blob/main/src/App.js)|
|wenyun#2362|[GitHub](https://github.com/wen1011/hexschoolReact/blob/LV1/my-app/src/App.js)|
|ChloeLo#4858|[GitHub](https://github.com/chloelo/react-daily-task-router/blob/main/src/App.js)|
| 威爾#1694 | [GitHub](https://github.com/letcla0624/react-daily-task-router/blob/main/src/App.js) |
| Yiling#4054 | [GitHub](https://github.com/linlindon/react-daily-task-router/blob/main/src/App.js) |
| IceSam#7836 | [GitHub](https://github.com/I-chun/react-daily-task-router/blob/main/src/App.js) |
| hiYifang #0736 | [GitHub](https://github.com/hiYifang/react-daily-task-router/blob/main/src/App.js) |
| Kenge#3690 | [GitHub](https://github.com/pgkusn/react-daily-task-router/blob/main/src/App.js) |
| 葉秋#2335 | [GitHub](https://github.com/as880074/react-daily-task-router/blob/main/src/App.js)|
|Midnightdinner#6220|[GitHub](https://github.com/WOOWOOYONG/react-daily-task-router/blob/main/src/App.js)|
| L0F0#8733 | [GitHub](https://github.com/LOOFOO/react-router-day13/blob/main/src/App.js)|
|wiimax#4564| [Github](https://github.com/willismax/react-daily-task-router/blob/main/src/App.js)|
|Stanley#2505|[GitHub](https://github.com/TsaiMingDa/react-daily-task-router/commit/ba9b2684de8371dd4d69acb7adff09cd197d9ff9)|
|easton#3863|[Github](https://github.com/easton7906/react-daily-task-router/blob/main/src/App.js)|
|Mr.Sean#3825|[Github](https://github.com/seanhong1215/react-daily-task-router/blob/Day15/src/App.js)|
|Ryder#7398|[Github](https://github.com/rider159159/react-daily-task-router/blob/main/src/App.js)|
|Carolkiki2003#7399|[Github](https://github.com/carolkiki2003/react-daily-task-router/blob/main/src/App.js)|
|shin#5892|[Github](https://github.com/shin1030/react-daily-task-router/blob/feature/activate_route/src/App.js)|
|Yanyan#3555|[GitHub](https://github.com/Yangunli/react-router/blob/main/src/App.js)|
|翔#0859|[GitHub](https://github.com/ben0588/React_day13/blob/main/day13/src/App.js)|
|Bumble幫啵#0255|[GitHub](https://github.com/nick1092387456/react-daily-task-router/commit/188ecc8a368146a6a466004e03566be71dd62c6c)|
|Claire#2116|[GitHub](https://github.com/clairechang0609/react-daily-task-router/blob/main/src/App.js)|
|yoshidc#0455|[GitHub](https://github.com/yoshiyyc/react-daily-task-router/blob/main/src/App.js)|
|charlottelee849#0366|[GitHub](https://github.com/char849/react-daily-task-router/blob/main/src/App.js)|
|Ada|[GitHub](https://github.com/ada0104/react-daily-task-router/blob/d9e7e9139ef60e35307876a2744651f85663dce6/src/App.js)|
|hobby#6565|[GitHub](https://github.com/hobbyling/react-daily-task-router/blob/day15/src/App.js#L34-L38)|
|eching#9183|[GitHub](https://github.com/17eching/react-daily-task-router/blob/main/src/App.js)|
| NinaKuo#3332 |[GitHub](https://github.com/tina272763/react-daily-task-router/blob/main/src/App.js)|
|Kelvin#3296|[GitHub](https://github.com/BaBaSwan/hexschool-React-Day13-react-daily-task-router/blob/927e26e24e624e4871e4b7d58ca9ddf6fce9c8a7/src/App.js)|
|minmin#8960|[GitHub](https://github.com/chenminfan/hexschool_react-daily-task-router/blob/fb336f1d4e5c69f232757c0356d2acc183a82f5d/src/App.js)|
|ZengZeng|[GitHub](https://github.com/yokozeng/react-daily-task-router/blob/main/src/App.js)|
|Li-Ninja#0471|[GitHub](https://github.com/Li-Ninja/react-daily-task-router/commit/aa5b3fbc805c36eb829a116e52874bf4f889be74)|
| JASONlU |[GitHub](https://github.com/jasonlu0525/ReactRouter01/blob/main/src/App.js)|
| TedWang |[GitHub](https://github.com/TedWang06/react-daily-task-router/blob/main/src/App.js)|
| 許揚民 Evan#4546 |[GitHub](https://github.com/gitevanhsu/react-daily-task-router/blob/main/src/App.js)|
|Eshiunm|[GitHub](https://github.com/Eshiunm/react-daily-task-router-main-3/blob/main/src/App.js)|