Managing Routes and Navigation for a React Subdomain

In the first part of this series, I discussed how I structured a modular React layout for a subdomain. Now, in this second part, I’ll dive into how I managed routing and navigation to ensure seamless transitions between different layouts using React Router.

Using React Router to Manage Layouts

Since React is a Single Page Application (SPA) framework, managing navigation effectively is crucial. React Router provides a powerful way to define different layouts for different routes, making it an excellent tool for handling multiple sections of an app with distinct designs.

Key Routing Considerations

1. Separate Layouts for Different Pages – The main homepage and services page must have their own headers and footers.
2. Dynamic Component Rendering – Depending on the route, we should render different navigation and layout components.
3. SEO Optimization – Ensuring correct metadata for each section.

Creating a Dedicated Route for the Services Page

To maintain modularity, I structured my routes in App.js like this:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { ServicesLayout } from './layouts/ServicesLayout';
import { HomePage } from './HomePage';
import { MainLayout } from './layouts/MainLayout';

function App() {
  return (
    <Router>
      <Routes>
        {/* Default homepage layout */}
        <Route path="/" element={<MainLayout />}>
          <Route index element={<HomePage />} />
        </Route>

        {/* Services page with a separate layout */}
        <Route path="/services" element={<ServicesLayout />} />
      </Routes>
    </Router>
  );
}

export default App;

Explanation

• The MainLayout wraps the homepage and other standard pages.
• The ServicesLayout is a standalone route that provides a unique look and feel for the /services page.
• By structuring it this way, we ensure that users always get the correct layout depending on their route.

Dynamically Rendering Headers and Footers

Since we have two different layouts, we need a way to ensure that the correct navbar and footer are displayed on each page. Instead of repeating code, I used dynamic rendering to conditionally display components based on the active route.

Approach:

1. Check Route Location – Use the useLocation hook to determine which layout to render.
2. Conditional Rendering – Display ServicesHeader and ServicesFooter only when the user is on /services.

Example Implementation

import { useLocation } from 'react-router-dom';
import { ServicesHeader } from './ServicesHeader';
import { ServicesFooter } from './ServicesFooter';
import { MainHeader } from './MainHeader';
import { MainFooter } from './MainFooter';

function LayoutManager({ children }) {
  const location = useLocation();

  const isServicesPage = location.pathname.startsWith('/services');

  return (
    <div>
      {isServicesPage ? <ServicesHeader /> : <MainHeader />}
      <main>{children}</main>
      {isServicesPage ? <ServicesFooter /> : <MainFooter />}
    </div>
  );
}

This method ensures that the correct UI components are displayed dynamically, keeping the code DRY (Don't Repeat Yourself) and maintainable.

Example: Implementing react-router-dom

To integrate React Router effectively, ensure you have installed react-router-dom:

npm install react-router-dom

Then, wrap the main app with Router and use Routes to define paths.

import { BrowserRouter as Router } from 'react-router-dom';
import LayoutManager from './LayoutManager';
import AppRoutes from './AppRoutes';

function App() {
  return (
    <Router>
      <LayoutManager>
        <AppRoutes />
      </LayoutManager>
    </Router>
  );
}

export default App;

SEO and Meta Tag Considerations

One challenge with SPAs is managing SEO since content is dynamically rendered. To ensure the /services page has its own metadata, I used react-helmet-async:

Installing react-helmet-async

npm install react-helmet-async

Adding Dynamic Meta Tags

import { Helmet } from 'react-helmet-async';

function ServicesLayout() {
  return (
    <div>
      <Helmet>
        <title>Our Services - Company Name</title>
        <meta name="description" content="Explore our top-notch services tailored for your business needs." />
      </Helmet>
      <ServicesHeader />
      <main>
        <ServicesHero />
        <MachinesList />
        <BuildingSection />
        <ProductionSection />
        <InvestmentSection />
        <CertificatesSection />
        <ServicesContact />
      </main>
      <ServicesFooter />
    </div>
  );
}

Benefits:

• Ensures each page has unique meta tags for search engines.
• Improves SEO ranking and visibility.

With React Router, I was able to efficiently manage multiple layouts and dynamically render components based on route location. This approach keeps the codebase modular and easy to maintain while ensuring the correct UI components load for each section.

Day 4 of #60daysofcode