快捷導(dǎo)航

react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別

更新時(shí)間：2024年06月18日 09:14:56 作者：劍九?六千里

本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.功能：

Link：在單頁(yè)應(yīng)用程序（SPA）中提供導(dǎo)航，而不會(huì)導(dǎo)致頁(yè)面重新加載。當(dāng)用戶點(diǎn)擊鏈接時(shí)，React會(huì)阻止瀏覽器默認(rèn)的頁(yè)面刷新行為，并且使用 react-router 提供的導(dǎo)航方式，只更新 URL 并渲染對(duì)應(yīng)的組件，從而實(shí)現(xiàn)單頁(yè)面應(yīng)用（SPA）的效果。。
a：?jiǎn)螕魰r(shí)會(huì)導(dǎo)致完整頁(yè)面重新加載，導(dǎo)航到新 URL。

2.性能：

Link：由于不會(huì)導(dǎo)致頁(yè)面重新加載，因此它提供更好的用戶體驗(yàn)，特別是在 SPA 中。它提高了性能，因?yàn)楸苊饬瞬槐匾木W(wǎng)絡(luò)請(qǐng)求。
a：完整頁(yè)面重新加載會(huì)導(dǎo)致較慢的用戶體驗(yàn)，因?yàn)樾枰獜姆?wù)器獲取新頁(yè)面。

3.無障礙：

Link：提供更好的無障礙性，因?yàn)樗梢酝ㄟ^鍵盤聚焦和激活。
a：可能不那么無障礙，因?yàn)樗惶峁┡c按鈕或其他交互式元素相同的鍵盤導(dǎo)航和焦點(diǎn)行為。

使用Link標(biāo)簽

屬性描述

to
跳轉(zhuǎn)鏈接的路徑，如 /users/123。

query
已經(jīng)轉(zhuǎn)化成字符串的鍵值對(duì)的對(duì)象。

hash
URL 的 hash 值，如 #a-hash。

注意：React Router 目前還不能管理滾動(dòng)條的位置，并且不會(huì)自動(dòng)滾動(dòng)到 hash 對(duì)應(yīng)的元素上。如果需要管理滾動(dòng)條位置，可以使用 scroll-behavior 這個(gè)庫(kù)。

state
保存在 location 中的 state。

activeClassName
當(dāng)某個(gè) route 是激活狀態(tài)時(shí)，<Link> 可以接收傳入的 className。失活狀態(tài)下是默認(rèn)的 class。

activeStyle
當(dāng)某個(gè) route 是激活狀態(tài)時(shí)，可以將樣式添加到鏈接元素上。

onClick(e)
自定義點(diǎn)擊事件的處理方法。如處理 <a> 標(biāo)簽一樣 - 調(diào)用 e.preventDefault() 來防止過度的點(diǎn)擊，同時(shí) e.stopPropagation() 可以阻止冒泡的事件。

其他
你也可以在標(biāo)簽上傳入一些你想要的 props，如 title，id，className 等等。

link使用示例：

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about/" component={About} />
    </div>
  </Router>
);

export default App;

區(qū)別

<Link> 是 react-router 里實(shí)現(xiàn)路由跳轉(zhuǎn)的鏈接，一般配合 <Route> 使用，react-router 會(huì)接管Link 的默認(rèn)鏈接跳轉(zhuǎn)行為，區(qū)別于傳統(tǒng)的頁(yè)面跳轉(zhuǎn)，<Link> 的“跳轉(zhuǎn)”行為只會(huì)觸發(fā)相匹配的 <Route> 對(duì)應(yīng)的頁(yè)面內(nèi)容更新，而不會(huì)刷新整個(gè)頁(yè)面。
而 <a> 標(biāo)簽就是普通的超鏈接了，用于從當(dāng)前頁(yè)面跳轉(zhuǎn)到 href 指向的另一個(gè)頁(yè)面（非錨點(diǎn)情況）。

對(duì)比<a>,Link組件避免了不必要的重渲染，react-router只更新變化的部分從而減少DOM性能消耗，react的創(chuàng)新之處在于，它利用虛擬DOM的概念和diff算法實(shí)現(xiàn)了對(duì)頁(yè)面的"按需更新"，react-router很好地繼承了這一點(diǎn)

Link做了3件事情：

1、如果Link上定義了onClick方法，則執(zhí)行該onclick方法
2、click的時(shí)候阻止a標(biāo)簽?zāi)J(rèn)事件（這樣子點(diǎn)擊<a href="/abc">123</a>就不會(huì)跳轉(zhuǎn)和刷新頁(yè)面）
3、再取得跳轉(zhuǎn)href（即是to），用history（前端路由兩種方式之一，history & hash）跳轉(zhuǎn)，此時(shí)只是鏈接變了，并沒有刷新頁(yè)面

到此這篇關(guān)于react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別的文章就介紹到這了,更多相關(guān)react-router Link標(biāo)簽和a標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: