技能档案

Create Route

Name: Create Route
Author: seosd97

Create a new route following project conventions. Use when adding pages, routes, or navigation endpoints.

seosd970 星标2026年3月5日

职业: 软件开发人员
分类: 全栈

技能内容

Create Route (Simple FSD + React Router v7)

Architecture

In FSD with React Router v7:

src/routes.ts — Route configuration (connects paths to page files)
src/pages/ — Page composition layer (features assembly)
Page files are RR7 route modules with default export

Step 1: Create the Page (pages layer)

src/pages/{page-name}/
├── ui/
│   └── {page-name}-page.tsx    # RR7 route module (default export)
├── {page-name}.css.ts           # Page styles (optional)
└── index.ts                     # Public API

// pages/dashboard/ui/dashboard-page.tsx
import { StatsOverview } from "@/features/stats";
import { TopArtistsList } from "@/features/artist";

export default function DashboardPage() {
  return (
    <>
      <StatsOverview />
      <TopArtistsList />
    </>
  );
}

相关技能

Create Route | Skills Pool

// pages/dashboard/index.ts
export { default as DashboardPage } from "./ui/dashboard-page";

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

export default [
  index("pages/home/ui/home-page.tsx"),
  route("dashboard", "pages/dashboard/ui/dashboard-page.tsx"),
] satisfies RouteConfig;

// pages/dashboard/ui/dashboard-page.tsx
import type { Route } from "./+types.dashboard-page";

export async function loader({ request, context }: Route.LoaderArgs) {
  // SSR data loading
  return { stats: await fetchStats() };
}

export default function DashboardPage({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.stats}</div>;
}

// pages/dashboard/ui/dashboard-page.tsx
import type { Route } from "./+types.dashboard-page";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Dashboard - unwrap.fm" },
    { name: "description", content: "Your music listening analytics" },
  ];
}

export default function DashboardPage() {
  return <div>Dashboard</div>;
}

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

export default [
  index("pages/home/ui/home-page.tsx"),
  route("settings", "pages/settings/ui/settings-page.tsx", [
    index("pages/settings-general/ui/settings-general-page.tsx"),
    route("profile", "pages/settings-profile/ui/settings-profile-page.tsx"),
  ]),
] satisfies RouteConfig;

Create Route

Create Route (Simple FSD + React Router v7)

Architecture

Step 1: Create the Page (pages layer)

Create Route

Create Route (Simple FSD + React Router v7)

Architecture

Step 1: Create the Page (pages layer)

Step 2: Register the Route (routes.ts)

With Data Loading (loader)

With SEO Meta

Nested Routes

Rules

microsoft-vscode-extensions-copilot-assets-prompts-skills-project-setup-info-context7-skill-md

How to setup a project

Coding Standards

Nuxt4 Patterns

Coding Standards

Nextjs Turbopack