react router 4

大白妖發表於2018-05-12
React

React Router V4 也走了react的路，咳，一切都成元件。例如Route、Link、Switch等都是元件。
react-router和react-router-dom是react router拆分出來的，平時使用只需要引入react-router-dom，當然，如果搭配redux，你還需要使用react-router-redux。

Router

React Router 4 中，你可以將各種元件及標籤放進 <Router>元件中，它用來保持與 location 的同步。tips: <Router>元件下只允許存在一個子元素。可以像以下方式使用：

import { BrowserRouter } from `react-router-dom`
ReactDOM.render((
  <BrowserRouter>
    <App />  //在app中進行拆分，放網站的導航連結，以及其他的
  </BrowserRouter>
), document.getElementById(`main`))
  1. <BrowserRouter>：使用 HTML5 提供的 history API（pushState,
    replaceState以及popstate事件） 來保持 UI 和 URL
    的同步，在服務區來管理動態請求時，需要使用<BrowserRouter>元件；
  2. <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL
    的同步，一般靜態頁面使用；
  3. <MemoryRouter>：能在記憶體儲存你 “URL” 的歷史紀錄(並沒有對位址列讀寫)；
  4. <NativeRouter>：為使用React Native提供路由支援；
  5. <StaticRouter>：從不會改變地址；

<Route>元件有如下屬性：

  1. path: 路由匹配路徑。（沒有path屬性的Route 總是會 匹配）；
  2. exact：為true時，則要求路徑與location.pathname必須完全匹配,如 path=`/test`,你就只能匹配到`/test`；
  3. strict：true的時候，有結尾斜線的路徑只能匹配有斜線的location.pathname，如path=`/test/`只匹配 `/test/*`；

<Route>提供了三種渲染內容的方法：

  1. <Route component>：在地址匹配的時候React的元件才會被渲染，route props也會隨著一起被渲染；
  2. <Route render>：當匹配成功後呼叫該函式。該過程與傳入component引數類似,這種方式對於內聯渲染和包裝元件卻不引起意料之外的重新掛載特別方便；
  3. <Route children>：與render屬性的工作方式基本一樣，除了它是不管地址匹配與否都會被呼叫；

tips:<Route component>的優先順序要比<Route render>高,通常component引數與render引數被更經常地使用。children引數偶爾會被使用，它更常用在path無法匹配時呈現的`空`狀態。

<Switch>

<Switch>會遍歷自身的子元素（即路由）並對第一個匹配當前路徑的元素進行渲染

import { Switch, Route } from `react-router`

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

<Link>

當你點選<Link>時，URL會更新，元件會被重新渲染，但是頁面不會重新載入。
Link元件屬性：

  1. to（string/object）：要跳轉的路徑或地址；
  2. replace（bool）：為 true 時，點選連結後將使用新地址替換掉訪問歷史記錄裡面的原地址；為 false
    時，點選連結後將在原有訪問歷史記錄的基礎上新增一個新的紀錄。預設為 false；
// Link元件示例

// to為string
<Link to="/about">關於</Link>

// to為obj
<Link to={{
  pathname: `/courses`,
  search: `?sort=name`,
  hash: `#the-hash`,
  state: { fromDashboard: true }
}}/>

// replace 
<Link to="/courses" replace />

React Router擁有優質的文件，你可以檢視並從中瞭解更多的資訊

相關文章