[第04堂] Router

傳送門1
傳送門2

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>