How to Replace href='#' Placeholders with React Router Links in Stitch-Skills

Replace every <a href="#"> anchor in Stitch-Skills generated components with React Router's <Link to="..."> component to enable client-side navigation without page reloads.

The Stitch-Skills repository generates React components containing navigation anchors with dummy href="#" attributes. These placeholders require conversion to functional React Router links when integrating the UI into a full-stack application.

Why Stitch-Skills Uses Placeholder Links

According to the React Components skill documentation in plugins/stitch-build/skills/react-components/SKILL.md, Stitch screens are designed as standalone pages with href="#" placeholder links that must be replaced with React Router <Link> components before deployment. This architectural decision allows the generated components to remain framework-agnostic while clearly marking where navigation logic should be injected.

The specific requirement appears in lines 73–74 of the skill definition, which states that these dummy anchors need wiring to real routes when integrated into a complete React application.

Step-by-Step Conversion Process

Install React Router Dependencies

First, ensure react-router-dom is installed in your project:

npm install react-router-dom

Wrap Your Application with a Router

Initialize React Router at your application root using BrowserRouter (or HashRouter if deploying to static hosting):

// File: App.tsx
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      {/* Your component tree */}
    </BrowserRouter>
  );
}

Replace Anchor Tags with Link Components

Import the Link component and swap each <a href="#"> with a <Link to="..."> element. In plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx, lines 39–50 contain placeholder anchors that require conversion:

Before conversion:

// File: plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx
import React from "react";

export default function GoldStandardCard() {
  return (
    <div>
      <a href="#" className="font-semibold text-primary hover:underline truncate">
        Learn more
      </a>
      <a href="#" className="text-primary hover:underline truncate">
        View details
      </a>
    </div>
  );
}

After conversion:

// File: gold-standard-card.tsx
import React from "react";
import { Link } from "react-router-dom";

export default function GoldStandardCard() {
  return (
    <div>
      <Link
        to="/learn-more"
        className="font-semibold text-primary hover:underline truncate"
      >
        Learn more
      </Link>

      <Link
        to="/details"
        className="text-primary hover:underline truncate"
      >
        View details
      </Link>
    </div>
  );
}

Configure Route Definitions

Define matching routes in your router configuration to handle the new navigation paths:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import GoldStandardCard from "./gold-standard-card";
import LearnMorePage from "./LearnMorePage";
import DetailsPage from "./DetailsPage";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<GoldStandardCard />} />
        <Route path="/learn-more" element={<LearnMorePage />} />
        <Route path="/details" element={<DetailsPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Handling Stitch-Loop Screens

The placeholder link pattern also appears in Stitch-Loop utilities. The documentation in plugins/stitch-utilities/skills/stitch-loop/SKILL.md (line 105) explicitly mentions placeholder link handling for Stitch-Loop screens. Apply the same replacement strategy to any loop-generated components containing href="#" attributes to maintain consistent navigation behavior across the entire application.

Summary

• Stitch-Skills generates href="#" placeholders intentionally for navigation elements that require manual wiring to real routes.
• The conversion requires four steps: installing dependencies, wrapping the app with a Router, replacing <a> tags with <Link> components, and defining route configurations.
• Key files to modify include plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx and similar Stitch-Loop generated components.
• Client-side navigation preserves the single-page application experience by preventing full page reloads when users click navigation elements.

Frequently Asked Questions

What is the purpose of href="#" in Stitch-Skills generated code?

The href="#" attribute serves as a placeholder marker indicating where navigation links should be implemented. According to the source code in plugins/stitch-build/skills/react-components/SKILL.md, these dummy anchors keep components framework-agnostic while clearly signaling that React Router <Link> components must replace them during integration.

Do I need to replace every single href="#" in the codebase?

Yes, all placeholder anchors should be replaced with proper React Router <Link> components. This includes components generated by both the React Components skill and the Stitch-Loop utility (documented in plugins/stitch-utilities/skills/stitch-loop/SKILL.md). Leaving any href="#" intact will result in non-functional navigation that reloads the page or jumps to the top.

Can I use useNavigate instead of Link for these replacements?

While useNavigate provides imperative navigation, the <Link> component is preferred for standard anchor replacements. Use <Link> for declarative navigation in JSX (replacing <a> tags) and reserve useNavigate for programmatic navigation within event handlers or effects. The Stitch-Skills documentation specifically references <Link> components as the standard replacement pattern.

Will replacing href="#" with Link break my styling?

No, styling remains intact when converting to React Router's <Link>. The component renders as an HTML <a> tag by default, so Tailwind classes like font-semibold text-primary hover:underline and utility classes like truncate continue to function identically. Simply transfer the className attribute from the original anchor to the Link component.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}