Remix 路由模块输出对象handle函数

目录
  • 正文
  • 在哪里可以定义 handle？
    • 在根路由定义
  • 在页面 _index 路由中与 useMatch 一起
  • match 数组
  • 使用场景

正文

Remix handle 函数是一个有用的对外输出的 Route 模块对象，用于暴露特定的数据 match 对象，它们经常在一起使用。

当前 Remix 版本：1.15.0

在哪里可以定义 handle？

  • root 根组件
  • 路由页面

在根路由定义

import { /.../ } from "@remix-run/react";
// 根路由 handle 配合页面中 useMatches 获取到 app 数据
export const handle = {
  app: 1
}
export default function App() {
  return (
    <html lang="en">
      // ...
    </html>
  );

在页面 _index 路由中与 useMatch 一起

handle 与 useMatch 一起使用， useMatch 返回路由匹配相关的对象：

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 函数
  return (
    <div>
      <h1>Welcome to Remix</h1>
    </div>
  );
}

match 数组

match 是一个数组， 数组中的对象数据结构：

  • data： 当前 loader 函数返回的数据
  • handle： 当前路由定义的 handle 数据
  • id：当前的路由 id
  • params： 当前的参数
  • pathname： 当前的路由路径

match 一般是一个数组，会有两个对象：

  • root.tsx 中的 match 对象
  • 当前路由的 match 对象

使用场景

当路由中需要指定一些特定的数据的时候

  • Remix-118i 中需要指定 handle
export const handle = { i18n: "login" };

i18n 提供给 Remix-i18n 用于根据当前路由匹配。

引用

以上就是Remix 路由模块输出对象handle函数的详细内容，更多关于Remix 路由模块handle的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Remix中mdx table不支持表格解决

    目录 remix 配置文件中配置 mdx 属性 添加插件 remark-gfm remix 配置文件中配置 mdx 属性 remix 中支持 md/mdx 语法,但是 Remix 语法没有内置对 markdown 表格的支持. mdx 配置在 Remix 文档很不明显,从 remix 的配置文件的 .d.ts 文件. export interface AppConfig { mdx?: RemixMdxConfig | RemixMdxConfigFunction; } export inter

  • Remix路由模块输出对象loader函数详解

    目录 主要内容 loader 函数定义 loader 函数配合 useLoaderData 一起使用 loader 函数返回值 loader 函数的类型 loader 函数中获取 params loader 函数中处理 headers loader 函数上下文 loader 中重定向到 错误处理 在页面中的表现 loader 作为纯 api 输出数据使用 小结 主要内容 Remix loader 函数是一个获取当前页面页面数据的函数,经常与 useLoaderData 一起配合使用 当前 Rem

  • Remix后台开发之remix-antd-admin配置过程

    目录 Remix Antd Admin Project experience URL Current Remix Version 设计动机 核心包 国际化 图表库 裁剪工具 Remix 优点 用法 格式化工具 支持 Remix Antd Admin 一款基于 Remix / Antd / Echarts / Styled-components 的管理系统,可快速进行项目初始化.(本项目偏前端) Project experience URL 访问地址(注意部署在 vercel):remix-ant

  • Remix如何支持原生 CSS方法详解

    目录 Remix CSS 语法 links 函数写法 links 函数层级 links 函数中 css 媒体查询 第三方 css import 语法 小结 Remix CSS 语法 Remix 是一个多页面的框架,对页面的原生 CSS 的支持分为两大类型: 使用 links 函数,转换成 link 标签支持 css 使用 javascript import 语法支持 css ,但是最终也会成为 link 标签 驼峰命名法 .PrimaryButton { /* ... */ } html 属性法

  • 全栈轻量级搭配之Remix Prisma Sqlite使用分析

    目录 一.为什么是 Remix/Prisma/Sqlite ? 二.Prisma 命令提前看 三.在 Remix 中添加 Sqlite 和 Prisma 的流程如下: 1.安装依赖 2.用 sqlite 初始化 prisma 3.在 Schema 文件中添加模型 4.生成客户端代码 5.使用迁移命令 6.在 studio 中查看 7.在 Remix 中使用 ①. 对外暴露 db ②. 抽象模型层 ③. 在 action/loader 中使用模型层操作数据库 ④. 额外的 seed 初始化 四.流

  • Remix 后台桌面开发electron-remix-antd-admin

    目录 Remix Antd Admin Electron 项目地址 当前 Remix 版本 设计动机 Core Packages 增加左面主文件 增加 Remix 配置文件 增加 nodemon.json 核心包 国际化 图表库 裁剪工具 优点 npmrc config 使用方法 格式化工具 构建 支持 Remix Antd Admin Electron 基于 Electron/Remix/Antd/Echarts/Styled-components 的管理系统,能够快速初始化项目. 项目地址

  • ThinkPHP模板之变量输出、自定义函数与判断语句用法

    本文实例讲述了ThinkPHP模板之变量输出.自定义函数与判断语句用法.主要包括变量输出.自定义函数与判断语句三种用法.分享给大家供大家参考.具体分析如下: 模板操作变量输出: 快捷输出变量 复制代码 代码如下: {:function(-)} //执行方法并输出返回值 {~function} //执行方法不输出 {@var} //输出Session变量 {#var} //输出Cookie变量 {&var} //输出配置参数  {%var} //输出语言变量 {.var} //输出GET变量 {^

  • arguments对象验证函数的参数是否合法

    使用arguments对象验证函数的参数是否合法 <script> function sum(arg1,arg2) //加法函数 { var realArgCount = arguments.length; //调用函数时传递的实参个数 var frmArgCount = sum.length; //函数定义时的形参个数 if(realArgCount < frmArgCount) //如果实际参数个数小于形参个数 { var e = new Error(); //定义错误信息,然后抛出

  • JavaScript极简入门教程（二）：对象和函数

    阅读本文需要有其他语言的编程经验. JavaScript 中的简单类型包括: 1.数字 2.字符串 3.布尔(true 和 false) 4.null 5.undefined 此外的其他类型均是对象(我们不要被 typeof 操作符的返回值所迷惑),例如: 1.函数 2.数组 3.正则表达式 4.对象(对象自然也是对象) 对象基础 在 JavaScript 中,对象是属性的集合(对象为关联数组),每个属性包括: 1.属性名,必须为字符串 2.属性值,可以为除了 undefined 之外的任何值

  • js的对象与函数详解

    js的对象与函数详解

    一.对象 就是人们要研究的任何事物,不仅能表示具体事物,还能表示抽象的规则,计划或事件.          属性的无序集合,每个属性可以存一个值(原始值,对象,函数) 对象的特性:封装,尽可能的隐藏对象的部分细节,使其受到保护.只保留有限的接口和外部发生联系. js 中{},[] 来定义数组和对象 1.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 2.[ ]中括号,表示一个数组,也可以理解为一个数组对象. 3.{ } 和[ ] 一起使用,我们前面说到,{ } 是一

  • Python3 中作为一等对象的函数解析

    Python3 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这被叫做用户自定义函数. 在 Python 语言中,函数与整数.字符串.字典等基本数据类型一样,都是 一等对象 .所谓一等对象,即满足如下三个条件: 在运行时创建 能赋值给变量 能作为函数的参数或返回值 以下 IDLE 中的代码即在运行时创建了函数 factorial : >>

  • ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    本文实例讲述了ES6学习笔记之字符串.数组.对象.函数新增知识点.分享给大家供大家参考,具体如下: 1.模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> <p class="pClass">格式化字符串</p> </div> <

  • php中数字、字符与对象判断函数用法实例

    本文实例讲述了php中数字.字符与对象判断函数用法.分享给大家供大家参考.具体分析如下: 在php判断数字,字符,对象,数组等包括有参见 is_bool().is_int().is_integer().is_float().is_real().is_object() 和 is_array()这些函数了,不知道你知道多少呢. 1. 双精度数判断:is_double is_double -- is_float() 的别名 描述:此函数是 is_float() 的别名函数,代码如下: 复制代码 代码如

  • 枚举JavaScript对象的函数

    From: JavaEye.com 枚举JavaScript对象的函数: function iterator(obj) {  for (var property in obj) {  document.writeln("<p>" + property + " : " + obj[property] + "</p>");  } } 一个简单示例(test.js): function Employee () {   this.

  • JavaScript对象数组排序函数及六个用法

    分享一个用于数组或者对象的排序的函数.该函数可以以任意深度的数组或者对象的值作为排序基数对数组或的元素进行排序. 代码如下: /** * 排序数组或者对象 * by Jinko * date -- * @param object 数组或对象 * @param subkey 需要排序的子键, 该参数可以是字符串, 也可以是一个数组 * @param desc 排序方式, true:降序, false|undefined:升序 * @returns {*} 返回排序后的数组或者对象 * * 注意:

  • js 用于检测类数组对象的函数方法

    如下所示: //判定o是否是一个类数组对象 //字符串和函数有length属性,但是它们 //可以用typeof检测将其排除.在客户端JavaScript中,DOM文本节点 //也有length属性,需要用额外判断o.nodeType!=3将其排除 function isArrayLike(o){ if(o&&//o非null/undefined等 typeof o==="object"&&//o是对象 isFinite(o.length)&&a

随机推荐