# [第04堂] Router

[傳送門1](https://ithelp.ithome.com.tw/articles/10276645)
[傳送門2](https://reactrouter.com/en/main/hooks/use-params)
### react-router-dom
>react的一個常用套件，可以幫助我們在網頁不刷新的狀況下面做到更新網址，做SPA的時候會需要用到。
>現行版本為v6，和v5有蠻大的不同，開發的時候要注意一下。

## 安裝指令
$ npm install react-router-dom

**BrowserRouter、HashRouter**
>以標籤形式包覆SPA最上層的元件，讓元件（包含裡面的子元件）擁有路由的功能

* **BrowserRouter**
* 使用HTML5 history API (pushState, replaceState, popState)
* BrowserRouter的路徑格式：mypage.com/home

* **HashRouter**
* 使用URL的hash(window.location.hash)
* HashRouter的路徑格式：mypage.com/#/home
---------
* **Switch/Routes** (v5前使用Switch，v6後改成Routes)
放在JSX模板的節點內，Switch標籤裡面可以包多個標籤(只能包Route)，並控制如果路徑和兩個Route的path都匹配，Switch只會渲染第一個匹配的的Route。

* **Route**
根據路徑渲染對應的Component
* **path**：網址後面的後面的路徑。
* **component**：此route要顯示的元件。
* **exact**：加上exact，url路徑一定要和path完全相同，才會渲染component指定的元件。(例子1)
* **sensitive**：url和path的大小寫必須完全相符才會渲染元件。(例子2)
* **strict**：搭配exact使用，檢查url的斜線是否也和path完全相同，讓url和path的匹配更嚴謹。

## 例子1
<Route exact path="/home" component="Home" /> 
    
## 例子2   
<Route sensitive path="/Home" component="Home" />
    
    
<Routes>
    <Route path="/" element={<Dashboard />}>
        <Route path="messages" element={<DashboardMessages />} />
        <Route path="tasks" element={<DashboardTasks />} />
    </Route>
    <Route path="about" element={<AboutPage />} />
</Routes>

* **Redirect**
重新導向，和Route一樣可以放在Switch標籤之中。
* **to**：必要屬性，指定要重新導向的路徑。(例子3)
* **from**：from 屬性只有當 Redirect 在 Switch 標籤中和 to 一起時可以使用，當 url 和 from 相符時，便會轉向 to 指定的路徑。(例子4)
* **push**：會將重定向的新路徑 Push 至歷史記錄保留，而不是用Replace取代，回到上一頁沒有紀錄。(例子5)
* **另外**：Redirect也和Route一樣有exact、strict、sensitive屬性和from搭配使用，負責檢查url和from的匹配條件。

## 例子3
<Route path='/home' component={Home} />
<Route path='/1' component={One} />
<Redirect to="/home" />
//url如果沒有找到匹配的path就會將頁面導向'/home'
//例如:在url輸入'/333'後，url會自動變成'/home'將你導向渲染Home的頁面

## 例子4
<Switch>
    <Redirect from='/' push to="/home" />
    <Route path='/home' component={Home} />
    <Route path='/1' component={One} />
    <Route path='/2' component={Two} />             
</Switch>

## 例子5
<Redirect push from='/3' to="/home" />

* **Link**
類似於HTML的a標籤

<Link to="/about">About</Link>

* **NavLink**
進階的Link，可以根據現在的路由給定Active Style

<NavLink to="/">Home</NavLink>