十八(4)、react 之 react-router中的Link和NavLink組件的使用 ------ 2019-11-10

1、Link組件的作用:

Link組件的作用類似于 a 標(biāo)簽,是用來做路由跳轉(zhuǎn)的;

<Link to="/home">首頁</Link>
to屬性:Link標(biāo)簽必須的屬性,屬性值是要跳轉(zhuǎn)的路由

2、NavLink組件的用法和Link組件基本相同,區(qū)別在于NavLink組件被激活的Link有個(gè)active Class屬性;

3、to屬性值的兩種寫法:

(1)字符串形式的屬性值:
   to="/home
   傳遞參數(shù):to="/home/2"

(2)對(duì)象形式的寫法:
 <Link to={{
     pathname:'/artical/3',
     state:'哈哈哈'
   }}>文章三</Link>
這個(gè)state是隱式傳參,這個(gè)state值在路徑或者頁面中看不到,只有在Route內(nèi)部獲取
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • SPA單頁應(yīng)用 傳統(tǒng)的項(xiàng)目大多使用多頁面結(jié)構(gòu),需要切換內(nèi)容的時(shí)候我們往往會(huì)進(jìn)行單個(gè)html文件的跳轉(zhuǎn),這個(gè)時(shí)候受網(wǎng)...
    視覺派Pie閱讀 12,184評(píng)論 1 55
  • React-router VS React-router-dom 區(qū)別 React-router 提供了一些 ro...
    direwolf_閱讀 3,368評(píng)論 0 3
  • React Router教程 React項(xiàng)目的可用的路由庫是React-Router,當(dāng)然這也是官方支持的。它也分...
    IT老馬閱讀 59,302評(píng)論 0 49
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化,入門級(jí)到專家級(jí),廣度和深度都會(huì)有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,682評(píng)論 0 7
  • 一、基本用法 React Router 安裝命令如下。 $ npm install -S react-router...
    sunnyghx閱讀 4,596評(píng)論 0 6

友情鏈接更多精彩內(nèi)容