日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

詳解react-router-dom?v6版本基本使用介紹_React

作者：Rise_11 ? 更新時(shí)間： 2022-05-14 編程語言

Routes

  • 代替Switch組件,不會(huì)向下匹配
  • 用來包裹Route

Route

  • 必須被Routes組件包裹
  • component屬性變成element
  • caseSensitive 路徑大小寫敏感屬性，默認(rèn)是不敏感（訪問/about = /ABOUT）
  • index 與path屬性是互斥的，index表示為當(dāng)前路由的根
  • 可以用作layout組件，不寫element屬性，寫了要與 Outlet組件配合使用（嵌套路由）
? ? ? ? 
? ? ? ? ? }>
? ? ? ? ? 
? ? ? ? 

? ? ? ? 
? ? ? ? ? ? user~} />
? ? ? ?

Navigate

  • 用來代替Redirect組件
  • replace屬性 跳轉(zhuǎn)模式 "PUSH" | "REPLACE"
  • 只要這個(gè)組件一渲染就會(huì)發(fā)生跳轉(zhuǎn)
? ? ? ? 
? ? ? ? ? }>
? ? ? ? ? 
? ? ? ? ? } />
? ? ? ?

NavLink

  • className，自定義激活時(shí)的樣式名 可以為字符串或者函數(shù)
  • end 匹配子路由時(shí)是否高亮
  • caseSensitive 代表匹配路徑時(shí)是否區(qū)分大小寫

useRoutes

用來管理路由表，相比v5，可能需要借助一些第三方庫來實(shí)現(xiàn)路由config管理，現(xiàn)在v6版本自帶

const routes = useRoutes([
? ? {
? ? ? path: '/home',
? ? ? element: 
? ? },
? ? {
? ? ? path: '/about',
? ? ? element: 
? ? },
? ? {
? ? ? path: '*',
? ? ? element: 
? ? },
? ? {
? ? ? path: '/user',
? ? ? children: [
? ? ? ? {
? ? ? ? ? index: true,
? ? ? ? ? element: 
user~
 // 這種不屬于嵌套路由，這里面children會(huì)防到父親的位置，所以不需要配合Outlet組件使用
? ? ? ? }
? ? ? ]
? ? }
? ])

嵌套路由

嵌套路由一般是配合 Outlet 組件使用，此組件類似于Vue的router-view組件，告知子路由應(yīng)該渲染在什么位置

{
? ? ? path: '/home',
? ? ? element: , // 這種才屬于嵌套路由
? ? ? children: [
? ? ? ? {
? ? ? ? ? path: 'message',
? ? ? ? ? element: 
? ? ? ? },
? ? ? ? {
? ? ? ? ? path: 'article',
? ? ? ? ? element: 
? ? ? ? }
? ? ? ]
}

在Home組件中使用才能渲染子路由

? ? ? 

? ? ? ? 

? ? ? ? ? 

? ? ? ? ? ? message
? ? ? ? ? 

? ? ? ? ? 

? ? ? ? ? ? article
? ? ? ? ? 

? ? ? ? ? 

? ? ? ? ? ? 
? ? ? ? ? ? {/* {outlet} */}
? ? ? ? ? 

? ? ? ? 

? ? ?

路由傳參

  • params傳參（useParams）
  • search參數(shù)傳參（useSearchParams）
  • state傳參 (useLocation，獲取v5版本的location對(duì)象，如果直接輸入可能state為null)

編程式導(dǎo)航

useNavigate

const navigate = useNavigate()

navigate('detail3', {

state: {

id: *item*.id,

content: *item*.content,

title: *item*.title

}

})

 返回上一頁

 前進(jìn)

其他一些hooks

  • useInRouterContext 判斷組件是否被Router包裹，可能有些第三方組件需要判斷
  • useNavigationType 返回用戶到當(dāng)前頁面的導(dǎo)航類型 "POP" | "PUSH" | "REPLACE";
    • 注意 POP是指在瀏覽器直接打開了這個(gè)路由組件（刷新頁面）
  • useOutlet 返回嵌套的路由，可以代替Outlet組件
  • useResolvedPath 給定一個(gè)url，解析出path，hash，search（location對(duì)象）

原文鏈接：https://juejin.cn/post/7073405036025348110
欄目分類
最近更新