iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
1
Modern Web

TypeScript + React + 雜七雜八系列 第 10

【Day 10】React Router 之最基本的用法

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

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


React Router

React Router 是一個在 React 應用中使用路由的函式庫,你可以驅動你的 url 來改變畫面的呈現,就直接安裝下來用看看吧。

npm i react-router-dom

因為 typescript 需要明確的型別,還要額外安裝

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

筆者會對 Router 額外開一個資料夾來放

+ src/router/Router.tsx

首先就是一定要用 <HashRouter> (或是 <BrowserRouter>,但筆者不熟悉正式機要如何正確配置,所以一直都是用 hash)在父節點包住其它 react-router-dom 提供的 component 才能正確使用。

然後 <Link> 會轉換成 <a>

<Route> 則是會去匹配目前 path 是否有對應到,來渲染定義的 component,要特別注意的是 exact 的屬性,有設置的話這代表該 <Route> 的 path 要完全匹配 url。

<Route> 所定義的那三個 component

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

執行結果


然後示範動態的 url Parameters

筆者認為這有些 typescript 型別的眉角可以說明

改動一下 Router.tsx

這裡新增了兩個 <Link>

還有 <Route> 也有變化

接下來調整一下 Blog.tsx

這裡因為 typescript 型別的關係,從 react-router-dom 導出了 RouteComponentProps 這個型別定義來當 props 的型別

選定 RouteComponentProps 按下 F12,即可看到它究竟是提供了什麼

這樣我們就能夠正常的使用 location 和 match 了,才怪,上上一張的程式碼中,name 這個屬性它還是不認得,這時就要請泛型出場了,最後程式碼變成這個樣子

執行結果

為了讓 typescript 能正確的理解 match,就得好好搞清楚他們有什麼樣的型別定義一番。

另外,如果是用 Query Parameters (也就是 ?queryString=value 這一種)就不用處理這種強型別定義,location.search 就是純字串來使用而已,筆者是直接用 URLSearchParams(location.search) 這種方式來處理的。


以上就是筆者在使用 typescript + React Router 的時候的一點點小小心得

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


明天會繼續講 React Router 的一些特別的使用方式!


上一篇
【Day 09】JSS
下一篇
【Day 11】React Router 之稍微進階一點的用法
系列文
TypeScript + React + 雜七雜八30

尚未有邦友留言

立即登入留言