iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 25

【DAY 25】react-router三劍客,Router、Route、Link(下)

  • 分享至 

  • xImage
  •  

【前言】
  今天一樣不多說廢話,直接進主題。
【正文】
  今天來介紹Link吧!

Link就是提供我們導引到其他頁面的連結,會被render成<a>標籤。

  1. to:string、object,導到目標連結
// 可以放string
<Link to="/about">About</Link>
// 可以放object,裡面可以有pathname、search、hash、state
<Link
  to={{
    pathname: "/courses", // 連結的字串
    search: "?sort=name", // 搜尋的表達形式
    hash: "#the-hash", // 將hash放到url上
    state: { fromDashboard: true } // 要放進location中的state
  }}
/>
  1. replace:boolean,會把history stack直接替換成目前的連結字串
  2. innerRef:function,提供refs到最底層的component
  3. 你也可以提供其他props進去,如className、title屬性,這些都會被當成<a>的attribute

  今天就先這樣吧,明天再來介紹其他的組件XD(其實是要湊篇數


上一篇
【DAY 24】react-router三劍客,Router、Route、Link(中)
下一篇
【DAY 26】React-router,其它很有用的組件(上)
系列文
請你當我的好朋友吧!ReactJS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
AndrewYEE
iT邦新手 3 級 ‧ 2023-02-03 15:07:04

請問history stack是甚麼?

我要留言

立即登入留言