講完最基礎的Route設置之後，
來學習如何更準確的經由path來渲染畫面上的元件。

Route標籤屬性

Route標籤裡面得屬性除了path、component以外還有以下屬性

• exact：

  加上exact，url路徑一定要和path完全相同，才會渲染component指定的元件

  <Route exact path="/home" component="Home" />
  //如果url為"/home/1"，將不會渲染Home元件
  
  <Route path="/home" component="Home" />
  //url為"/home/1"，會渲染Home元件
  
  

• strict：

  在有exact的情況下搭配使用，檢查url的斜線是否也和path完全相同，讓url和path的匹配更嚴謹。

  <Route strict exact path="/home" component="Home" />
  //如果url為"/home/"，將不會渲染Home元件
  
  <Route exact path="/home" component="Home" />
  //url為"/home/"，會渲染Home元件
  

• sensitive：

  url和path的大小寫必須完全相符才會渲染元件。

  <Route sensitive path="/Home" component="Home" />
  //如果url為"/home"，將不會渲染Home元件
  
  <Route path="/Home" component="Home" />
  //url為"/home"，會渲染Home元件
  

• render：

  可以利用render屬性直接將要渲染的JSX寫入route標籤中，進入這個route後便會直接渲染內容。

<Route path='/home' render={()=><h1>利用render寫入</h1>} />

Redirect標籤屬性

Redirect用於將url強制將畫面重定向到某個path的畫面。
和Route一樣可以放在Switch標籤之中。

記得引入檔案！（{ }裡越來越多東西了...）

import {  Route, Switch , Redirect } from 'react-router-dom';

來看怎麼設定屬性

• to：

  必要屬性，指定要重新導向的路徑。

<Route  path='/home' component={Home} />
<Route  path='/1' component={One} />

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

• from：

  from屬性只有當**Redirect在**Switch標籤中和to一起時可以使用，

  當url和from相符時，便會轉向to指定的路徑。

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

另外Redirect也和Route一樣有exact、strict、sensitive屬性和from搭配使用，
負責檢查url和from的匹配條件。

• push：

會將重定向的新路徑 Push 至歷史記錄保留，而不是用Replace取代，回到上一頁沒有紀錄。

<Redirect push from='/3' to="/home" />

下一篇來學react-router-dom中哪些功能可以藉由在畫面上觸發進而轉址！