routes.ts
本页内容

routes.ts

摘要

此文件为必需项

参考文档 ↗

将 URL 模式映射到应用程序中路由模块的配置文件。

有关更多信息,请参阅路由指南

示例

基本

将您的路由配置为一个对象数组。

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("some/path", "./some/file.tsx"),
  // pattern ^           ^ module file
] satisfies RouteConfig;

您可以使用以下助手来创建路由配置条目

  • route — 用于创建路由配置条目的助手函数
  • index — 用于为索引路由创建路由配置条目的助手函数
  • layout — 用于为布局路由创建路由配置条目的助手函数
  • prefix — 用于向一组路由添加路径前缀的助手函数,而无需引入父路由文件
  • relative — 创建一组路由配置助手,这些助手解析相对于给定目录的文件路径。旨在支持将路由配置拆分到不同目录下的多个文件中

基于文件的路由

如果您更喜欢通过文件命名约定而不是配置来定义路由,@react-router/fs-routes 包提供了一个文件系统路由约定

import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default flatRoutes() satisfies RouteConfig;

路由助手

文档和示例 CC 4.0
编辑