react-router簡明學習

来源:https://www.cnblogs.com/xiaohuochai/archive/2018/03/25/8636336.html
-Advertisement-
Play Games

[1]Router [2]Route [3]Redirect [4]Link [5]Switch ...


前面的話

  路由用來分發請求。後端是提供服務的,所以它的路由是在找controller,前端是顯示頁面的,所以它的路由是在找component。本文將詳細介紹react-router-dom的內容

 

Router

  Router是路由器組件的低階介面,通常會使用如下某個高階router來替代它

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

【BrowserRouter】

  最常用的是BrowserRouter

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

  1、basename: 當前位置的基準 URL。如果頁面部署在伺服器的二級(子)目錄,需要將 basename 設置到此子目錄。 正確的 URL 格式是前面有一個前導斜杠,但不能有尾部斜杠

<BrowserRouter basename="/calendar"/>

  2、getUserConfirmation:當導航需要確認時執行的函數。預設使用 window.confirm

// 使用預設的確認函數
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

  3、forceRefresh:當設置為 true 時,在導航的過程中整個頁面將會刷新。 只有當瀏覽器不支持 HTML5 的 history API 時,才設置為 true

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

  4、keyLength:location.key 的長度。預設是 6

<BrowserRouter keyLength={12}/>

  5、BrowserRouter只能渲染單一子元素

 

Route

  Route是react-router中最重要的組件,用來匹配請求並渲染相應組件

  1、path 路徑的匹配值,可以包括以下幾種特殊符號

:paramName – 匹配一段位於 /、? 或 # 之後的 URL。 命中的部分將被作為一個參數
() – 在它內部的內容被認為是可選的
* – 匹配任意字元(非貪婪的)直到命中下一個字元或者整個 URL 的末尾,並創建一個 splat 參數

  例子如下所示:

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

  [註意]Route組件不能像普通組件一樣,以屬性的形式傳遞參數,但可以通過path屬性來傳遞。但一定要區分router後面的:_id或:id

'/category/:_id'

  2、component 要顯示的組件

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

  3、render 函數中return的值就是要顯示的內容

<Route path="/home" render={() => <div>Home</div>}/>

  4、children與render的區別在於,不管有沒有匹配,都想顯示的內容

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

  [註意]component/render/children只能三個選一個使用

【匹配規則】

  預設地,路由進行寬鬆匹配。在下麵例子中,路由匹配到/one時,既顯示組件A,也顯示組件B

<Route  path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

  如果要進行確切匹配,則需要添加exact屬性。這樣,路由匹配到/one時,只顯示組件A

<Route  exact path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

  還有一種是嚴格匹配,即斜杠也必須嚴格匹配。下麵例子中,路由匹配到/one/時,會顯示組件A,但匹配到/one時,什麼都不會顯示

<Route  strict path="/one/" component={A}/>

  [註意]嚴格匹配並不是確切匹配。下麵例子中,路由匹配到/one時,即顯示組件A,也顯示組件B

<Route  strict path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

  如果要確切匹配,則需要

<Route  exact strict path="/one" component={A}/>

  但是,一般地,strict屬性很少使用

【屬性】

  Route預設攜帶三個props:包括match、location、history

  如果使用component,則使用this.props來獲取,如果是render,則在回調函數中使用參數(props)=>{}來獲取

  1、match

  match包括以下屬性

params 鍵值對
isExact 是否確切匹配
path 路徑中設置的值
url URL中的path值

  2、location

  location中包含如下屬性

  [註意]直接訪問location,而不是訪問history.location

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

  通過Link傳遞的state,可以在location中獲取到

  [註意]剛開始時,或者直接刷新瀏覽器,state是沒有值的,只有跳轉到該鏈接時,state才有值。再後來,刷新也有值了

  3、history

  history包含如下屬性

length: history棧的長度
action: 當前的action
location: 當前的location對象

  history包含如下方法

push()
goBack() = go(-1)
goForward() = go(1)
go() 跳轉到 history棧中的哪個enter
replace(path, [state]) 替換history棧中的當前entry
push(path, [state])  添加當前entry到history棧中

 

Redirect

  Redirect將頁面導航到新位置,新位置將覆蓋history棧中的當前位置,類似於伺服器端的重定向(HTTP 3xx)

  to屬性可以是一個字元串,表示跳轉的地址

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

  to屬性也可以是一個對象

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

  push屬性為true時,表示添加新記錄到history棧中,而不是替換當前記錄

<Redirect push to="/somewhere/else"/>

 

Link

  Link是對a標簽的封裝,提供無刷新的頁面跳轉。Link標簽主要的屬性是to屬性

  1、一般地,to是一個字元串

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

  2、也可以寫成對象的形式

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

  [註意]在Link里的子組件或同組件的點擊事件,最好加上阻止預設行為和阻止冒泡

<Link>
  <div onclick={}></div>
</Link>
<Link onclick={}>

【NavLink】

  NavLink相對於Link來說,增加了一些樣式屬性

  activeClassName表示被匹配的a標簽的樣式名;activeStyle表示被匹配的a標簽的樣式

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

 

Switch

  渲染Route或Redirect匹配到的第一個子元素

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

  [註意]switch必須直接包括Route,中間不可包含div,否則不生效


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於 微信公眾號:前端呼啦圈(Love-FED) 我的博客:勞卜的博客 知乎專欄:前端呼啦圈 前言 Hello,大家好,又與大家見面了,這次給大家分享下前端異常監控中需要瞭解的異常捕獲與上報機制的一些要點,同時包含了實戰性質的參考代碼和流程。 首先,我們為什麼要進行異常捕獲和上報呢? 正所謂百密一疏 ...
  • 調用方解決跨域的方法只有一種,那就是隱藏跨域。 何為隱藏跨域? 隱藏跨域的核心思路是通過反向代理隱藏跨域以欺騙瀏覽器 什麼是反向代理?反向代理是指通過中間伺服器使得訪問同一個功能變數名稱的兩個不同url最終會去往兩個不同的伺服器 一:反向代理 - Nginx配置 在之前的被調用方解決跨域中,訪問的請求是絕對 ...
  • Javascript作為前端開發必須掌握的一門語言,因為語言的靈活性,有些知識點看起來簡單,在真正遇到的時候,卻不一定會直接做出來,今天我們就一起來看看幾道題目吧 題目1 var val = 'smtg'; console.log(' Value is' + (val 'smtg') ? 'Some ...
  • 數組:使用單獨的變數名來存儲一系列的值。 數組元素:數組裡面的每一項 數組長度:數組裡面元素的個數 表示方法:數組名.length 數組下標(索引):數組元素在數組的位置,從0開始 如:var a = [12,45,7] 這個數組名為a 有三個元素,分別是12 45 7 ,45的位置是第1位。 還可 ...
  • 初級的文章和demo已經基本完成了,代碼也已經上傳到了我的github上,如果你對webpack的使用並不是十分瞭解,那麼建議你回頭看下走近系列,裡面包括了當前項目中使用頻繁的插件,loader的講解。以及基本的webpack配置,相關依賴等。如果你已經有了一定的webpack使用經驗。那麼你直接看 ...
  • 邏輯非(!)操作符,首先它的操作數轉換為一個布爾值,然後對其反求。 兩個邏輯非(!!)操作符,第一個(!)操作符,首先對她的操作數轉換為一個布爾值,然後對其求反,得到布爾值;第二個邏輯非(!)操作符則對這個布爾值再求反。 ...
  • DOM 是一個樹形結構,操作一個DOM節點,實際上就是這幾個操作:更新、刪除、添加、遍歷 在操作DOM節點之前,需要通過各種方式先拿到這個DOM節點,常用的方法有: 一、通過元素類型的方法來操作: 註意: 首碼為document,意思是在document節點下調用這些方法,當然也可以在其他的元素節點 ...
  • 微信小程式 下拉刷新 上拉載入,簡單方便,易於上手。 1.首先上list.wxml代碼 2.再上js代碼 3.簡單的list.wxss 4.list.json配置文件 至此,一個簡單的下拉刷新上拉載入基本搞定了。巧用微信的各種Api,就很舒服。 繼續擴展的話: 1.updateDom那裡下拉刷新是簡 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...