---
# System prepended metadata

title: 再談React(續)
tags: [React]

---


# 再談React(續)

###### tags: `React`

本篇內容是Week13-2的筆記部分

---

## Build

### 絕對路徑
會去根目錄找`a`檔案

```javascript=
<script src="/a.js">
```

### 相對路徑
會在同一個資料夾去找`a`檔案

```javascript=
<script src="./a.js">
```

---

![](https://i.imgur.com/tygpvEd.png)

這張圖再說明, 在server上跑的是絕對路徑. 


## React Router

[練習網站](https://reacttraining.com/react-router/web/example/basic)

如果是用`npm start`會在server上跑
如果是用`open index.html`會變成開啟檔案的方式

---

### 實際操作

先安裝 `npm install react-router-dom`

要用router的地方, 用`<Router>``</Router>`把最外層包起來.

每一個地方給他一個`path`和`component`

==根據路徑會自己render出那個`component`==

> 加上`exact`標籤, 路徑是只有`/`才會匹配



### HashRouter vs BrowserRouter

HashRouter => 用在靜態檔案 => 相對路徑 => 放在github page上.

BrowserRouter => 在server上跑的時候用 => 絕對路徑 => 放在自己的server上.
記得要引入`<Link>`

永遠都load同一個檔案, 只是後面幫你加了路徑而已.

很多事情不用自己做,其實蠻方便的...

### 路徑相比

#### HashRouter

現在先做一件事, 我在`package.json`裡面, 先加入這一行, 改為相對路徑, 然後build

```javascript=
"homepage":"."
```
這時後的網址會是
```
file:///Users/Norris/Desktop/week22_2/my-app/build/index.html#/post
```

也就是說server還是會去找index.html

#### BrowserRouter

在`App.js`改為`BrowserRouter`, 發現沒辦法點開, 這是因為`Link`還沒有寫好.

原本在`Nav.js`是這樣
```javascript=
<a href={'#' + name}>
  {text}
</a>
```

現在改為這樣
```javascript=
<Link to={'/' + name}>
  {text}
</Link>
```

當你用BrowserRouter的時候,要確定自己是跑在server上,才能用這個方法.

### hightlight 標籤更改

現在是透過`URL`來決定你的`state`, 所以原本控制哪一個標籤的state可以都刪掉了

把要render的東西包在一個`<Route>`裡面

現在變成看路徑是什麼? 而render出相對的`component`

這邊debug搞不出來, 不知道為什麼`nav`不見了...

但是概念上有比較懂, 簡單來說, 就是根據有沒有match來決定他的狀態

要連接就用`link`, 要render什麼就用`Route`


```javascript=
<Item to = "/" exact={true}>
  Home
</Item>		
```

```javascript=
<Route
  path={to}
  exact={exact}**
  children ={({match}) =>(
    <li className={match ? "active" : ""}>
      <Link to={to}>
        {children}
      </Link>
    </li>
  )}
/>		
```



