# 1.29 React
###### tags: `React`
## 零、目錄&代辦事項

## 壹、React Router

[講義在這裡](https://github.com/eyesofkids/mfee11-react/blob/main/%E6%95%99%E6%9D%90/0129/react-router%E4%BD%BF%E7%94%A8%E8%AA%AA%E6%98%8E.md)

### 一、安裝react router模組

### 二、react router基本介紹

* React是單頁的應用程式，藉由React Router模擬出多頁的應用程式。
* 一個React應用程式(應該是指App?)只能有一個Router元件
* Router元件直接由React Router模組導入，一般都是使用BrowserRouter作為Router元件。Router元件必需位於你的應用的最外層(最上層的元件) => 在App.js寫router
* src內多建pages資料夾，來放router的頁面。改成以pages來組合頁面。
* 首頁(/)要加exact，因為每個網址都有(/)，加這個比較保險。
* 跟node的路由一樣，越嚴謹(越長)的放上面，先match到一個後就不會再match了。

### 三、為什麼要用 link to 取代 a href ?

* 如果用a href的話，會造成整個頁面刷新。造成react元件的生命週期重跑，也就是重新掛載，會使state都回到預設值。
* 主要影響像是登入會員，若把登入記錄在state內，預設是false(未登入)，如果用a連結，每跳轉一次頁面就會變回false。
* 如果真的要用a href的話，把登入狀態記錄在伺服器端的session較佳。

## 貳、react router 三個重要屬性值

* 下面是用withRouter的作法
用來擴充元件的功能，像是Hook也是

不管withRouter埋在哪裡，都會拿到history、location、match三大屬性

* withRouter > HOC元件(High Order Component)

### 1. match
範例3.react-router網址參數match.params
ProductBaby.js

### 2. location
範例5.react-router網址上查詢字串與URLSearchParams
ProductMen.js

### 3. history
* 範例6.react-router利用history在程式中移動各頁面
* ProductWomen.js
* history是用程式控制移轉頁面，用來按按鈕、按圖片等觸發事件後移轉，像是在會員登入成功後跳轉。不是a連結!
* push: 到指定的路由
* goBack: 回上一頁

## 參、額外補充

### 一、卷軸跳回最上方，範例7

[ScrollToTop元件在這裡](https://github.com/eyesofkids/mfee11-react/issues/16)

react router有個小問題，在用link to時，頁面切換後卷軸不會在最上方。用issue 16的ScrollToTop元件解決，使頁面切換後，讓捲軸保持在最上方。

### 二、404找不到頁面，範例7

[404找不到頁面在這裡](https://github.com/eyesofkids/mfee11-react/issues/17)

通常是由server端做這個，但也能由前端模仿。

### 三、多階層巢狀路由，範例7
* pages中的Product.js跟ProductCategory.js
1. App.js只會定義一個路由 path = "/productcategory"
2. ProductCategory內會有另一個路由

### 四、保護路由、會員登入後才看得到，範例7
* React Router 的範例蠻複雜的
* App.js中把auth狀態傳給navbar

// App.js
const [auth, setAuth] = useState(false)

// MyNavBar.js
const { auth } = props
...
{auth && (
    <Nav.Link as={NavLink} to="/member">
    會員專區
    </Nav.Link>
)}

// Member.js
const { auth } = props
if (!auth) return <Redirect to="/login" />

### 五、麵包屑，範例8-10

* 麵包屑應該要每頁都有，或是在APP內顯示，都可以。
* 多層麵包屑的話，會另外放在config資料夾內，之後就改config內就可以了。

### 六、載入中的指示器

* react-bootstrap、bootstrap的spinner

## 肆、react中的搜尋、排序、過濾資料

* 如果是利用query string，則是往後端的方向去搜尋
* 資料龐大的情況下較適合用後端搜尋
* 表單元素複習：
1. 值要對應到狀態
2. 值的變化要由設定狀態處理，設定狀態由onChange事件來處理
* 搜尋功能用onChange事件會很敏感，只要有key一個注音或任何一個鍵就會執行。[參考這裡](https://eddychang.me/react-chinese-ime-issue)