---
tags: react,
disqus: hackmd
---

###### tags: `react-router`

# react-router-example(2)

參考文章
[一探究竟了解React-router 4簡易教學](https://www.ucamc.com/e-learning/javascript/278-%E7%B0%A1%E5%96%AE%E4%BB%8B%E7%B4%B9%E4%BA%86%E8%A7%A3react-router-4%E6%95%99%E5%AD%B8)
[【DAY 26】React-router，其它很有用的組件（上）](https://ithelp.ithome.com.tw/articles/10207306)

---

接續[react-router-example(1)](https://hackmd.io/kDCWMHvpQ-mk2jcje6KbBg?view)的內容，接著我想記錄在第一篇被改名為Router的BrowserRouter以及他的另一個兄弟HashRouter。

## BrowserRouter和HashRouter

### <font color="#dd0000">HashRouter</font>
Hash = #，就是井字號的意思。使用HashRouter，原本的網址後面就會多一個#/再加上目標網址。
再回到第一個範例的程式碼，把原本import的BrowserRouter改成HashRouter感受一下他的效果吧。

### <font color="#dd0000">BrowserRouter</font>
它的原理是使用HTML5 history API (pushState, replaceState, popState)來使你的內容隨著url動態改變的。

---

## Route
Route是路由的一個原材料，它是控制路徑對應顯示的組件。我們經常用的是exact、path以及component屬性。

他其實還有其他的方法跟props可以使用，可以看[這裡](https://reacttraining.com/react-router/web/api/Route)。

* exact控制匹配到/路徑時不會再繼續向下匹配。
* path標識路由的路徑。
* component表示路徑對應顯示的組件。

後面我們將結合NavLink完成一個很基本的路由使用。同時我們可以設置例如/second/:id的方式來控制頁面的顯示

---

## Link和NavLink

### Link
主要API是to，to可以接受string或者一個object，來控制url。
1. to：string、object，導到目標連結
2. replace：boolean，會把history stack直接替換成目前的連結字串
3. innerRef：function，提供refs到最底層的component
4. 你也可以提供其他props進去，如className、title屬性，這些都會被當成\<a>的attribute

// 可以放string
<Link to="/about">About</Link>

// 可以放object，裡面可以有pathname、search、hash、state
<Link
  to={{
    pathname: "/courses", // 連結的字串
    search: "?sort=name",　// 搜尋的表達形式
    hash: "#the-hash", // 將hash放到url上
    state: { fromDashboard: true } //　要放進location中的state
  }}
/>

### NavLink
它可以為當前選中的路由設置類名、樣式以及回調函數等。
1. activeClassName：string，就是被匹配到的時候，對他增加class name
2. activeStyle：object，就是被匹配到的時候，對他增加css inline-style樣式
3. isActive：boolean，利用function來判斷該NavLink是否被匹配到
4. exact：是否路徑要與網址一模一樣
5. strict：是否要嚴格判斷結尾斜線

<NavLink to="/faq" activeClassName="selected">FAQs</NavLink>
<NavLink to="/faq" activeStyle={{ fontWeight: "bold", color: "red" }}>FAQs</NavLink>

#### exact

用於嚴格匹配，匹配到/則不會繼續向下匹配，to則是控制跳轉的路徑，activeClassName是選中狀態的類名，我們可以為其添加樣式。

---

## match

match是在使用router之後被放入props中的一個屬性，在class創建的組件中我們需要通過this.props.match來獲取match之中的信息。

---

## Switch

Switch常常會用來包裹Route，它裡面不能放其他元素，用來只顯示一個路由。