大家好，今天的篇章要介紹的是昨天的 React Router

會延續前一天的專案結構接續下去進行修改，如果沒有參與到昨天的建置過程，這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day10-react-router

登入驗證

這邊要建立一個 PrivateRoute 來讓點擊連結時會先檢查是否有登入，參考 來源

首先增加一個 PrivateRoute.tsx

+ src/router/PrivateRoute.tsx

之前剛好都沒提到為什麼沒有安裝 prop-types，來檢查 component 的 props 的型別，因為 typescript 大部分都用 interface 來取代了（當然你想要 props: { name: string } 這樣定義也行），用 interface 就不用去記 PropTypes 有提供什麼樣的函數來實作 props 型別檢查了。

這裡要注意到的是 isAuthenticated，它應該會是利用 redux 來存放驗證身分結果，不過目前還沒講解到 redux，筆者就先用主動丟 prop 的方式來做，這個 prop isAuthenticated 的使用上如果是 true 就會帶出目標 component，如果是 false 就會 redirect to="/"。

然後修改一下 Router.tsx

這裡就是 import 了剛剛做好的 PrivateRoute.tsx，將它當成 <Route /> 來使用，傳進用 useState 做的可切換 isAuthenticated。

<Route /> 所定義的 component

+ src/components/day11/Home/Home.tsx
+ src/components/day11/PrivateHome/PrivateHome.tsx

執行結果

在非登入的狀態時，如果想要進 PrivateRoute 的 '/privateHome'，就會被 redirect 到 '/'。

Route Config + 動態麵包屑

引入 Route Config 來做嵌套路由，參考 來源

會新增一個紀錄所有 route 的物件，然後利用 routes 包住的區塊為嵌套的 route

這邊定義的 interface 都是為了要實作 RouteWithSubRoutes，用它來接收一層一層的路由表並 render 出目標 component

（特殊說明：PrivateRoute 目前設置有點奇怪，因為目前還沒有用 Redux 來將 isAuthenticated 給管理起來，後續 redux 篇章就會將 isAuthenticated 刪掉）

在 JSX 要使用它就會這樣寫，將 routes 的第一層給 map 出來，目前第一層是 Home.tsx 會被 render，第二層的 routes 或更後面層級的就要依照你所想要使用的 layout 來放置，筆者的第二層就是寫在 Home.tsx 裡面

最後的 Router.tsx

+ src/components/day11/Home/Home.tsx
+ src/components/day11/About/About.tsx
+ src/components/day11/Blog/Blog.tsx

嵌套路由的執行結果，可以注意到 Home.tsx 是扮演 layout 的角色，筆者會利用這個特性來利用於後期的版面規劃

接下來就是動態麵包屑了，參考 來源，筆者算是也還沒有很確切的了解到可以說明的境界

就先放上筆者實驗了幾次的最終版本，想要達到只要額外定義一個 component，後續只要引入該 component 就可以有動態麵包屑的功能

要先安裝這個，react-router-config，就是從上面的參考來源中發現的函式庫，還不知道它的說明文檔在哪，所以也是一知半解，如果有人知道可以麻煩告訴我嗎？ XD

npm i react-router-config
npm i -D @types/react-router-config

然後新增一個動態麵包屑的 copmonent

+ src/router/RouterBreadcrumbs.tsx

要先說到最後一行的 withRouter，簡言之可以利用它來得到最近的一次 RouteComponentProps，要注意到的是得用 HOC 的方式使用，不知道什麼時候會出 hooks 版的

然後就是 react-router-config 的 matchRoutes 會依照目前的路徑取出路由表內定義的路由，回傳一維陣列，就直接用 meterial-ui 的元件 Breadcrumbs 把陣列 map 出 JSX 囉！

將這個 RouterBreadcrumbs.tsx 給使用在 Home.tsx 裡就 OK 了

執行結果

以上就是筆者在使用 typescript + React Router 做登入驗證或動態麵包屑的一點點小小心得

最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day11-react-router

明天會介紹 redux 與 typescript 究竟會擦出什麼樣的火花！