reactRouter V4 的使用

這是關於本身對 REACT-router v4+ 版本學習理解作的dome

## 這裏獻上git
## 官方文檔
## 參考
## react 死循環之本身引用本身.

組件解釋

1. BrowserRouter : 建立URL

<BrowserRouter />
 http://example.com/about

1. HashRouter: 建立URL

<BrowserRouter />
 http://example.com/#/about

1. Route : 路由顯示什麼組件,顯示在什麼位置,它有三個props用來定義渲染內容:

   • component
   • render
   • children

2. switch : The <Switch> is not required for grouping <Route>s, but it can be quite useful. A <Switch> will iterate over all of its children <Route> elements and only render the first one that matches the current location. This helps when multiple route’s paths match the same pathname, when animating transitions between routes, and in identifying when no routes match the current location (so that you can render a 「404」 component).=>{

   1. switch 將迭代全部route子元素,僅渲染與當前位置匹配的第一個子元素.
   2. 當沒有路徑與當前位置匹配的時候就選擇沒有設置path props 的組件進行渲染.(這樣的功能能夠實現404的效果)

}

1. Link : a 連接做用, to 屬性不能少.
2. NavLink : 一個特殊版本<Link>，它將在與當前URL匹配時爲渲染元素添加樣式屬性。
3. Redirect : 當<Redirect>被使用的時候,它會將當前url導入他的to值指向的url組件.

---

dome筆記

路由器組件只能有一個子元素,子元素能夠是HTML 元素div - 或反應組件.

• dome1 是關於基本的使用.

  1. exact 做用的讓定義了這個props的組件僅在url等於path值的時候顯示.
  2. match 在 this.props 中

• dome2 是關於url參數的獲取.

  1. 官方文檔說:能夠使用正則表達式來控制應匹配哪些參數值.
  2. 參數能夠使用正則表示式匹配,也就是說,只要當參數爲:asc 或者 desc 的時候 咱們的組件ComponentWithRegex 才顯示, direction 能夠隨時設置,這裏並非一個函數.

• dome3 理解 switch

  1. switch 將迭代全部route子元素,僅渲染與當前位置匹配的第一個子元素.
  2. 當沒有路徑與當前位置匹配的時候就選擇沒有設置path props 的組件進行渲染.(這樣的功能能夠實現404的效果)
• 重定向
• 自定義路由