Bug: Internal links use <a href> instead of React Router <Link>, causing full page reloads #52

New Issue

Closed

opened 2026-05-17 17:24:09 -05:00 by null · 0 comments

null commented

2026-05-17 17:24:09 -05:00

Owner

Problem

Multiple pages and components use plain <a href="/path"> for internal navigation instead of React Router's <Link to="/path">. This causes full page reloads (hard navigation) instead of SPA client-side navigation, defeating the purpose of a single-page app.

Affected Links

Footer.jsx

Lines 59, 61, 64, 83-95 — All internal navigation links use <a href>
Quick Links, Services, Industries columns all hard-reload on click

Additional Bug

Contact.jsx has a "Request Consultation" button that links to /contact — which is the page the user is already on. This is a dead link.

Fix

Import Link from react-router-dom in all affected files
Replace <a href="/path"> with <Link to="/path"> for all internal routes
Keep <a href> only for external links (email, phone, Zoho support center)
Remove or fix the self-referencing /contact link on the Contact page

## Problem Multiple pages and components use plain `<a href="/path">` for internal navigation instead of React Router's `<Link to="/path">`. This causes full page reloads (hard navigation) instead of SPA client-side navigation, defeating the purpose of a single-page app. ## Affected Links ### Pages - `Contact.jsx:127` — "Request Consultation" button links to `/contact` (itself!) - `IndustryDetail.jsx:16` — "Back to Industries" link uses `<a href="/industries">` - `IndustryDetail.jsx:95` — "Request This Service" link uses `<a href="/contact">` - `IndustryDetail.jsx:100` — "Back to Industries" link uses `<a href="/industries">` - `Services.jsx:54` — "Learn More" links use `<a href={/services/${service.id}}>` - `Support.jsx:130` — "Request Consultation" button links to `/contact` - `ServiceDetail.jsx:16` — "Back to Services" link uses `<a href="/services">` - `ServiceDetail.jsx:111` — "Request This Service" link uses `<a href="/contact">` - `ServiceDetail.jsx:116` — "Back to Services" link uses `<a href="/services">` - `Industries.jsx:54` — "Explore" links use `<a href={/industries/${industry.id}}>` ### Footer.jsx - Lines 59, 61, 64, 83-95 — All internal navigation links use `<a href>` - Quick Links, Services, Industries columns all hard-reload on click ## Additional Bug Contact.jsx has a "Request Consultation" button that links to `/contact` — which is the page the user is already on. This is a dead link. ## Fix 1. Import `Link` from `react-router-dom` in all affected files 2. Replace `<a href="/path">` with `<Link to="/path">` for all internal routes 3. Keep `<a href>` only for external links (email, phone, Zoho support center) 4. Remove or fix the self-referencing `/contact` link on the Contact page