# How to Replace href='#' Placeholders with React Router Links in Stitch-Skills
> Learn to replace href='#' with React Router Links in Stitch-Skills. Enable seamless client-side navigation and boost your app's performance.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12
---
**Replace every `` anchor in Stitch-Skills generated components with React Router's `` 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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 `` 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:
```bash
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):
```tsx
// File: App.tsx
import { BrowserRouter } from "react-router-dom";
function App() {
return (
{/* Your component tree */}
);
}
```
### Replace Anchor Tags with Link Components
Import the `Link` component and swap each `` with a `` element. In [`plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx), lines 39–50 contain placeholder anchors that require conversion:
**Before conversion:**
```tsx
// File: plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx
import React from "react";
export default function GoldStandardCard() {
return (
);
}
```
**After conversion:**
```tsx
// File: gold-standard-card.tsx
import React from "react";
import { Link } from "react-router-dom";
export default function GoldStandardCard() {
return (
Learn more
View details
);
}
```
### Configure Route Definitions
Define matching routes in your router configuration to handle the new navigation paths:
```tsx
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 (
} />
} />
} />
);
}
```
## 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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 `` tags with `` components, and defining route configurations.
- **Key files to modify** include [`plugins/stitch-build/skills/react-components/examples/gold-standard-card.tsx`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md), these dummy anchors keep components framework-agnostic while clearly signaling that React Router `` 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 `` 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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 `` component is preferred for standard anchor replacements. Use `` for declarative navigation in JSX (replacing `` tags) and reserve `useNavigate` for programmatic navigation within event handlers or effects. The Stitch-Skills documentation specifically references `` components as the standard replacement pattern.
### Will replacing href="#" with Link break my styling?
No, **styling remains intact** when converting to React Router's ``. The component renders as an HTML `` 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.