Remix?路由模塊輸出對象handle函數(shù)
更新時(shí)間：2023年04月10日 14:53:46 作者：喬治_x
這篇文章主要為大家介紹了Remix?路由模塊輸出對象handle函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
Remix handle 函數(shù)是一個有用的對外輸出的 Route 模塊對象，用于暴露特定的數(shù)據(jù) match 對象，它們經(jīng)常在一起使用。
當(dāng)前 Remix 版本：1.15.0
在哪里可以定義 handle？
- root 根組件
- 路由頁面
在根路由定義
import { /.../ } from "@remix-run/react";
// 根路由 handle 配合頁面中 useMatches 獲取到 app 數(shù)據(jù)
export const handle = {
app: 1
}
export default function App() {
return (
<html lang="en">
// ...
</html>
);
在頁面 _index 路由中與 useMatch 一起
handle 與 useMatch 一起使用， useMatch 返回路由匹配相關(guān)的對象：
import type { V2_MetaFunction } from "@remix-run/node";
// hooks
import { useMatches } from "@remix-run/react";
export const meta: V2_MetaFunction = () => {
return [{ title: "New Remix App" }];
};
// 輸出定義 handle 對象
export const handle = {
test: 1,
}
export default function Index() {
const match = useMatches()
console.log(match[1].test) // 在 match 中訪問 match 函數(shù)
return (
<div>
<h1>Welcome to Remix</h1>
</div>
);
}
match 數(shù)組
match 是一個數(shù)組， 數(shù)組中的對象數(shù)據(jù)結(jié)構(gòu)：
- data： 當(dāng)前 loader 函數(shù)返回的數(shù)據(jù)
- handle： 當(dāng)前路由定義的 handle 數(shù)據(jù)
- id：當(dāng)前的路由 id
- params： 當(dāng)前的參數(shù)
- pathname： 當(dāng)前的路由路徑
match 一般是一個數(shù)組，會有兩個對象：
- root.tsx 中的 match 對象
- 當(dāng)前路由的 match 對象
使用場景
當(dāng)路由中需要指定一些特定的數(shù)據(jù)的時(shí)候
- Remix-118i 中需要指定 handle
export const handle = { i18n: "login" };
i18n 提供給 Remix-i18n 用于根據(jù)當(dāng)前路由匹配。
引用
以上就是Remix 路由模塊輸出對象handle函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于Remix 路由模塊handle的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解react阻止無效重渲染的多種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
利用React實(shí)現(xiàn)一個有點(diǎn)意思的電梯小程序
這篇文章主要為大家詳解介紹了如何利用React實(shí)現(xiàn)一個有點(diǎn)意思的電梯小程序，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2022-08-08
在開發(fā)過程中，總是遇到很多列表的顯示。當(dāng)上數(shù)量級別的列表渲染于瀏覽器，終會導(dǎo)致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來解決這個問題2021-05-05
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了react移動端二級路由嵌套的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫一個可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作
這篇文章主要介紹了react+antd 遞歸實(shí)現(xiàn)樹狀目錄操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
在React中寫一個Animation組件為組件進(jìn)入和離開加上動畫/過度效果
這篇文章主要介紹了在React中寫一個Animation組件為組件進(jìn)入和離開加上動畫/過度效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06