> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Mich9025/vencol-front/llms.txt
> Use this file to discover all available pages before exploring further.
# Routing & Navigation
> Learn about React Router setup, route configuration, and navigation patterns in the VENCOL Front Template
## Routing Overview
The VENCOL Front Template uses **React Router v6** for client-side routing, providing a seamless single-page application experience.
## Router Configuration
### Main Router Setup
The application uses `BrowserRouter` as the main router component in `App.tsx`:
```tsx App.tsx theme={null}
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
} />
} />
} />
} />
} />
} />
{/* Catch-all: WordPress pages by slug — must be last */}
} />
);
}
```
The catch-all route `/:slug` must be defined **last** to prevent it from intercepting other routes. This route handles dynamic WordPress pages.
## Route Definitions
### Static Routes
Static routes map directly to specific page components:
| Route | Component | Description |
| ----------- | --------- | ------------------------------------------- |
| `/` | `Home` | Landing page with hero, about section, FAQs |
| `/nosotros` | `About` | Company information page |
| `/blog` | `Blog` | Blog listing page |
| `/contacto` | `Contact` | Contact form page |
### Dynamic Routes
Dynamic routes use URL parameters to load specific content:
#### Solution Details
```tsx theme={null}
} />
```
**Usage:**
* `/soluciones/refrigeracion-comercial`
* `/soluciones/sistemas-hvac`
**Accessing the parameter:**
```tsx SolutionDetail.tsx theme={null}
import { useParams } from 'react-router-dom';
const { slug } = useParams<{ slug: string }>();
const solution = siteContent.solutions.items.find(s => s.slug === slug);
```
#### Blog Post Details
```tsx theme={null}
} />
```
**Usage:**
* `/blog/post-title-here`
#### WordPress Pages (Catch-all)
```tsx theme={null}
} />
```
This route fetches pages from WordPress CMS by slug:
```tsx PageDetail.tsx theme={null}
import { useParams } from 'react-router-dom';
import { fetchWPPageBySlug } from '../lib/wordpress';
const { slug } = useParams<{ slug: string }>();
useEffect(() => {
fetchWPPageBySlug(slug)
.then((wpPage) => {
if (wpPage) setPage(wpPage);
else setNotFound(true);
})
.catch(() => setNotFound(true));
}, [slug]);
```
## Navigation Components
### Navbar Navigation
The `Navbar` component uses `NavLink` for active route highlighting:
```tsx Navbar.tsx theme={null}
import { NavLink as RouterNavLink, Link } from 'react-router-dom';
`
px-4 py-1.5 rounded-full text-md font-medium transition-all duration-300
${isActive
? 'text-brand-green bg-white/10 shadow-[0_0_10px_rgba(74,222,128,0.1)]'
: 'text-gray-300 hover:text-white hover:bg-white/5'}
`}
>
{link.label}
```
`NavLink` automatically receives an `isActive` boolean in its className function, enabling active state styling.
### Solutions Dropdown
The navbar includes a dynamic dropdown for solutions:
```tsx Navbar.tsx theme={null}
{solutionsData.map((solution) => (
{solution.title}
{solution.description}
))}
```
### Programmatic Navigation
Use the `Link` component for navigation:
```tsx theme={null}
import { Link } from 'react-router-dom';
// Basic link
Contact Us
// Dynamic link
Read More
// Link with state
Contact
```
## Scroll Behavior
### Scroll to Top on Route Change
The application implements automatic scroll-to-top on navigation:
```tsx App.tsx theme={null}
function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
```
This component is placed inside the `Router` to access routing context:
```tsx theme={null}
{/* Rest of app */}
```
## Mobile Navigation
### Mobile Menu State
The navbar manages mobile menu state with automatic closing on route change:
```tsx Navbar.tsx theme={null}
const [isOpen, setIsOpen] = useState(false);
const [mobileSolutionsOpen, setMobileSolutionsOpen] = useState(false);
const location = useLocation();
// Close mobile menu on route change
useEffect(() => {
setIsOpen(false);
setMobileSolutionsOpen(false);
}, [location]);
```
### Mobile Dropdown
The mobile menu includes an expandable solutions section:
```tsx Navbar.tsx theme={null}
```
## Loading States
Dynamic pages implement loading states during data fetching:
```tsx PageDetail.tsx theme={null}
if (loading) {
return (
);
}
```
## 404 Handling
### WordPress Page Not Found
The `PageDetail` component handles missing pages:
```tsx PageDetail.tsx theme={null}
if (notFound || !page) {
return (
Página no encontrada
La página que buscas no existe o ha sido movida.
Volver al Inicio
);
}
```
## Navigation Best Practices
Always use React Router's `Link` component instead of `` tags for internal navigation. This prevents full page reloads and maintains SPA behavior.
```tsx theme={null}
// Good
About
// Bad
About
```
Extract route parameters using `useParams` hook:
```tsx theme={null}
const { slug } = useParams<{ slug: string }>();
```
Always provide TypeScript types for parameters.
Place catch-all routes last in the Routes configuration to prevent them from intercepting more specific routes.
Use `NavLink` instead of `Link` when you need to style the active route:
```tsx theme={null}
isActive ? 'active-class' : 'inactive-class'
}
/>
```
## Related Topics
Learn about the overall application structure
Understand how dynamic pages are loaded from WordPress