首頁 > 軟體

React前端路由應用介紹

2022-09-26 14:01:42

瀏覽器端的前端路由模式:hash模式,history模式

安裝路由模組

路由模組不是react自帶模組,需要安裝第3方模組

// react-router-dom 它現在最新的版本6
npm i -S react-router-dom@5

react-router-dom路由庫,它路由相關的設定當作元件呼叫設定

一些相關元件

路由模式元件

包裹整個應用,一個React應用只需要使用一次

  • HashRouter: 使用URL的雜湊值實現 (localhost:3000/#/first)
  • BrowserRouter:使用H5的history API實現(localhost3000/first)

導航元件

用於指定導航連結, 最終Link會編譯成a標籤

  • Link: 不會有啟用樣式
  • NavLink:如果位址列中的地址和to屬性相匹配,則會有啟用樣式

路由規則定義元件

Route:

  • path屬性:路由路徑,在位址列中存取的地址
  • component屬性:和規則匹配成功後渲染的元件 /render/children
  • children>component>render

各元件關係示意圖


IT145.com E-mail:sddin#qq.com