自動

框架

版本

選單

入門

路由

指南

操作指南

安裝 TanStack Router
react

API

整合

TanStack Query
react

ESLint

路由器示例

自動

框架

版本

選單

入門

路由

指南

操作指南

安裝 TanStack Router
react

API

整合

TanStack Query
react

ESLint

路由器示例

本頁內容

createFileRoute 函式

createFileRoute 函式是一個工廠函式，可用於建立基於檔案的路由例項。然後，可以使用 tsr generate 和 tsr watch 命令利用此路由例項自動生成路由樹。

createFileRoute 選項

createFileRoute 函式接受一個型別為 string 的單個引數，該引數代表路由將從中生成檔案的路徑。

path 選項

型別：string 文字量
必需，但由 tsr generate 和 tsr watch 命令自動插入和更新
路由將從中生成檔案的完整路徑

createFileRoute 返回值

一個接受型別為 RouteOptions 的單個引數的新函式，該函式將用於配置檔案 Route 例項。

⚠️ 注意：要使 tsr generate 和 tsr watch 正常工作，必須使用 Route 識別符號從檔案中匯出檔案路由例項。

示例

tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  loader: () => {
    return 'Hello World'
  },
  component: IndexComponent,
})

function IndexComponent() {
  const data = Route.useLoaderData()
  return <div>{data}</div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  loader: () => {
    return 'Hello World'
  },
  component: IndexComponent,
})

function IndexComponent() {
  const data = Route.useLoaderData()
  return <div>{data}</div>
}

在 GitHub 上編輯

我們的合作伙伴

Code Rabbit

Netlify

Neon

Convex

Sentry

訂閱 Bytes

您的每週 JavaScript 資訊。每週一免費傳送給超過 10 萬開發者。

訂閱 Bytes

您的每週 JavaScript 資訊。每週一免費傳送給超過 10 萬開發者。