import { /.../ } from "@remix-run/react";
// 根路由 handle 配合頁(yè)面中 useMatches 獲取到 app 數(shù)據(jù)
export const handle = {
  app: 1
}
export default function App() {
  return (
    <html lang="en">
      // ...
    </html>
  );

在頁(yè)面 _index 路由中與 useMatch 一起

handle 與 useMatch 一起使用， useMatch 返回路由匹配相關(guān)的對(duì)象：

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 對(duì)象
export const handle = {
  test: 1,
}
export default function Index() {
  const match = useMatches()
  console.log(match[1].test) // 在 match 中訪問(wèn) match 函數(shù)
  return (
    <div>
      <h1>Welcome to Remix</h1>
    </div>
  );
}

match 數(shù)組

match 是一個(gè)數(shù)組，數(shù)組中的對(duì)象數(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ù)組，會(huì)有兩個(gè)對(duì)象：

root.tsx 中的 match 對(duì)象
當(dāng)前路由的 match 對(duì)象

使用場(chǎng)景

當(dāng)路由中需要指定一些特定的數(shù)據(jù)的時(shí)候

Remix-118i 中需要指定 handle

export const handle = { i18n: "login" };

i18n 提供給 Remix-i18n 用于根據(jù)當(dāng)前路由匹配。

引用

handle
remix-i18next

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

您可能感興趣的文章:

相關(guān)文章

詳解react阻止無(wú)效重渲染的多種方式
這篇文章主要介紹了詳解react阻止無(wú)效重渲染的多種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
react build 后打包發(fā)布總結(jié)
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序
這篇文章主要為大家詳解介紹了如何利用React實(shí)現(xiàn)一個(gè)有點(diǎn)意思的電梯小程序，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下
2022-08-08
React虛擬列表的實(shí)現(xiàn)
在開(kāi)發(fā)過(guò)程中，總是遇到很多列表的顯示。當(dāng)上數(shù)量級(jí)別的列表渲染于瀏覽器，終會(huì)導(dǎo)致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來(lái)解決這個(gè)問(wèn)題
2021-05-05
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解
這篇文章主要介紹了react移動(dòng)端二級(jí)路由嵌套的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
使用react-dnd編寫一個(gè)可拖拽排列的list
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫一個(gè)可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
react+antd 遞歸實(shí)現(xiàn)樹(shù)狀目錄操作
這篇文章主要介紹了react+antd 遞歸實(shí)現(xiàn)樹(shù)狀目錄操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
react+tsx中使用better-scroll詳解
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
在React中寫一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫/過(guò)度效果
這篇文章主要介紹了在React中寫一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫/過(guò)度效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06