# [React x Django] React Router

安裝```react-router-dom react-router-bootstrap```

進到```frontend```

npm install react-router-dom react-router-bootstrap

安裝完成

---
## React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等API，我們可以通過dom的事件控制路由。
例如點擊一個按鈕進行跳轉，大多數情況下我們是這種情況，所以在開發過程中，我們更多是使用React-router-dom。

### HashRouter和BrowserRouter
它們兩個是路由的基本，就像蓋房子必須有地基一樣，我們需要將它們包裹在最外層，我們只要選擇其一就可以了。現在講它們的不同：

#### HashRouter
如果你使用過react-router2或3或者vue-router，你經常會發現一個現象就是url中會有個#，例如localhost:3000/#，HashRouter就會出現這種情況，它是通過hash值來對路由進行控制。如果你使用HashRouter，你的路由就會默認有這個```#```。
>網址後方的這個#的意思是指，#後的所有字串都不會發GET請求到server端，像是上方的http://localhost:8080/src/#/about就還是只會送出http://localhost:8080/src/到server端，然後只要server端回傳JavaScript載入到客戶端，剩下的/about就由Router去判斷處理。

#### BrowserRouter
很多情況下我們則不是這種情況，我們不需要這個#，因為它看起來很怪，這時我們就需要用到BrowserRouter。

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

exact控制匹配到/路徑時不會再繼續向下匹配，path標識路由的路徑，component表示路徑對應顯示的組件。後面我們將結合NavLink完成一個很基本的路由使用。同時我們可以設置例如/second/:id的方式來控制頁面的顯示，這需要配合Link或者NavLink配合使用。

#### Link和NavLink的選擇
兩者都是可以控制路由跳轉的，不同點是NavLink的API更多，更加滿足你的需求。

##### Link
主要API是to，to可以接受string或者一個object，來控制url。

<link to="/courses"/>
<link to={{
     pathname:'/course',
     search:'?sort=name',
     hash:'#the-hash',
     state:{fromDashboard:true}
}}/>

這時點擊Link就會跳轉到courses。

##### NavLink
它可以為當前選中的路由設置類名、樣式以及回調函數等。

exact用於嚴格匹配，匹配到/則不會繼續向下匹配，to則是控制跳轉的路徑，activeClassName是選中狀態的類名，我們可以為其添加樣式。我們在/second後面添加1234來想路由中傳遞信息，這結合了上面Route中的/second/:id，結合使用了

---
在App.js import進來使用

import { BrowserRouter as Router, Route} from 'react-router-dom'

原本的

function App() {
  return (
    <div>
      <Header />
      
      <main className="py-3">
        <Container>
          <HomeScreen/>
        </Container>
      </main>
      
      <Footer />
    </div>
  );
}

export default App;

稍作置換

function App() {
  return (
    <Router>
      <Header />
      
      <main className="py-3">
        <Container>
          <Route path='/' component={HomeScreen} exact />
          <Route path='/product/:id' component={ProductScreen}  />
        </Container>
      </main>
      
      <Footer />
    </Router>
  );
}

export default App;

> exact:因為我們的開始頁面就是要從這裡開始

Product.js

import { Link } from 'react-router-dom'

原本：

<a href={`/product/${product._id}`}>
    <Card.Img src={product.image}/>
</a>

都改成

<Link to={`/product/${product._id}`}>
    <Card.Img src={product.image}/>
</Link>

Header.js

import { LinkContainer } from 'react-router-bootstrap'

原本：

<Navbar.Brand href="/">Ezra's Web</Navbar.Brand>
<Nav.Link href="/cart"><i className="fas fa-shopping-cart"></i>購物車</Nav.Link>
<Nav.Link href="/login"><i className="fas fa-user"></i>登入</Nav.Link>

改成

<LinkContainer to='/'>
<Navbar.Brand>Ezra's Web</Navbar.Brand>
</LinkContainer>

<LinkContainer to='/cart'>
    <Nav.Link><i className="fas fa-shopping-cart"></i>購物車</Nav.Link>
</LinkContainer>

<LinkContainer to='/login'>
    <Nav.Link><i className="fas fa-user"></i>登入</Nav.Link>
</LinkContainer>

連結取代<a>跟<href>，改成這樣的優點是：
省時間，畫面不會再重新載入