# 再談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> )} /> ```