Remix?路由模塊輸出對象handle函數(shù)

更新時(shí)間：2023年04月10日 14:53:46 作者：喬治_x

這篇文章主要為大家介紹了Remix?路由模塊輸出對象handle函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Remix handle 函數(shù)是一個(gè)有用的對外輸出的 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 是一個(gè)數(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 一般是一個(gè)數(shù)組，會有兩個(gè)對象：

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)前路由匹配。

引用

handle
remix-i18next

以上就是Remix 路由模塊輸出對象handle函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于Remix 路由模塊handle的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React useEffect、useLayoutEffect底層機(jī)制及區(qū)別介紹
useEffect 是 React 中的一個(gè) Hook,允許你在函數(shù)組件中執(zhí)行副作用操作,本文給大家介紹React useEffect、useLayoutEffect底層機(jī)制及區(qū)別介紹,感興趣的朋友一起看看吧
2025-04-04
基于react組件之間的參數(shù)傳遞(詳解)
下面小編就為大家?guī)硪黄趓eact組件之間的參數(shù)傳遞(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
create-react-app安裝出錯問題解決方法
這篇文章主要介紹了create-react-app安裝出錯問題解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
react 組件表格固定底部的實(shí)現(xiàn)代碼
在React中,要實(shí)現(xiàn)一個(gè)組件表格并且固定底部,可以使用CSS的固定定位或絕對定位來實(shí)現(xiàn),下面通過示例代碼給大家分享react 組件表格固定底部的實(shí)現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧
2024-05-05
React+hook實(shí)現(xiàn)聯(lián)動模糊搜索
這篇文章主要為大家詳細(xì)介紹了如何利用React+hook+antd實(shí)現(xiàn)聯(lián)動模糊搜索功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之?dāng)?shù)據(jù)轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
antd4里table滾動的實(shí)現(xiàn)
本文主要介紹了antd4里table滾動的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
React中的useState和setState的執(zhí)行機(jī)制詳解
這篇文章主要介紹了React中的useState和setState的執(zhí)行機(jī)制,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React元素與組件的區(qū)別示例詳解
這篇文章主要為大家介紹了React元素與組件的區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
在React中引入Tailwind?CSS的完整指南
在現(xiàn)代前端開發(fā)中,使用?UI?庫可以顯著提高開發(fā)效率,Tailwind?CSS?是一個(gè)功能類優(yōu)先的?CSS?框架,本文將詳細(xì)介紹如何在?React?項(xiàng)目中引入和使用?Tailwind?CSS,包括各種配置選項(xiàng)和最佳實(shí)踐,需要的朋友可以參考下
2025-04-04