In this tutorial, you'll learn about Flutter's fundamental navigation systems: Imperative Navigation (Navigator.push/pop) and Named Routes. We'll explore their practical implementation through building an example Car List app. Through this process, you’ll learn how to navigate between a list of cars and their detailed views, and how to pass data between screens.

By the end, you'll gain a solid understanding of how to manage navigation stacks and create a smooth user experience in your Flutter applications.

Table of Contents

• Prerequisites

• Why Should You Build Multi-Screen Apps?

• Flutter's Navigation Systems

• The Simple Navigator API: Navigator.push

• Named Routes: The Scalable Approach

• Backstack Management: Controlling User Flow

• Code Organization Tips for Scalable Navigation

• Scalable Navigation: When Built-in Isn't Enough

• How to Set Up Your Flutter Project: The Car List App

• Conclusion

Prerequisites

To get the most out of this tutorial, you should have:

• Basic understanding of the Dart programming language: Familiarity with concepts like variables, data types, functions, classes, and asynchronous programming.

• Fundamental knowledge of Flutter widgets: Knowing how to use StatelessWidget, StatefulWidget, and basic layout widgets like Column, Row, Container, and Text.

• Flutter SDK installed and configured: Ensure you have a working Flutter development environment set up on your machine.

• A code editor: Visual Studio Code or Android Studio with Flutter and Dart plugins installed.

Why Should You Build Multi-Screen Apps?

Real-world apps are rarely single-screen. Imagine a banking app that only shows your balance, or a social media app that only displays your feed. It's simply not practical.

Users expect to be able to:

• View a list of items (for example, cars, products, news articles).

• Tap on an item to see its detailed information.

• Access user profiles, settings, or shopping carts.

• Complete multi-step processes like checkout or onboarding.

This intricate dance between different views highlights that navigation is a core user experience component. A fluid, intuitive, and predictable navigation flow directly translates to improved user satisfaction and maintainability for developers. Confusing navigation, on the other hand, can quickly lead to user frustration and abandonment.

Flutter's Navigation Systems

Flutter provides powerful and flexible navigation mechanisms, catering to various application complexities. At a high level, we can categorize these mechanisms in the following ways:

1. Imperative Navigation (Navigator.push / pop): This is the most basic and direct way to control the navigation stack. You explicitly tell the Navigator to push a new route or pop the current one.

2. Named Routes: A more structured approach where routes are identified by string names, allowing for centralized configuration.

3. onGenerateRoute / onUnknownRoute: Advanced callbacks within MaterialApp or WidgetsApp that provide fine-grained control over how routes are generated, especially useful for dynamic or deep linking scenarios.

4. Declarative Navigation (for example, go_router, Beamer): For highly complex apps with deep linking, nested navigation, and web support, declarative packages offer a more state-driven approach to routing, where the URL or app state defines the current screen.

For the purpose of this article, we will focus on the built-in Imperative Navigation and the more scalable Named Routes, illustrating them with the Car List App example. Let’s see how they work.

The Simple Navigator API: Navigator.push

The most straightforward way to navigate in Flutter is using Navigator.push. This method takes a MaterialPageRoute (or a CupertinoPageRoute for iOS-style transitions) that defines the widget for the new screen.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailsScreen()),
);

Characteristics:

• Best for smaller apps: Where the number of screens is limited and data passing is simple.

• Can pass data using constructor: You can directly pass data to the new screen's constructor (for example, DetailsScreen(car: myCar)). This is intuitive for simple data.

While easy to use, Navigator.push can become cumbersome for larger apps as it requires direct instantiation of widgets at every navigation point, making centralized route management difficult.

Named Routes: The Scalable Approach

For applications with multiple screens and a more defined navigation structure, named routes offer a cleaner and more scalable solution. With named routes, you define a map of string names to screen-building functions within your MaterialApp.

Our Car List App perfectly demonstrates this:

// In MyApp widget's build method
MaterialApp(
  initialRoute: '/', // The starting screen of our app
  routes: {
    '/': (context) => HomeScreen(),          // Maps '/' to HomeScreen
    '/details': (context) => DetailsScreen(), // Maps '/details' to DetailsScreen
    '/profile': (context) => ProfileScreen(), // Maps '/profile' to ProfileScreen
  },
);

To navigate using a named route, you use Navigator.pushNamed():

// From HomeScreen to DetailsScreen
Navigator.pushNamed(context, '/details');

// From HomeScreen to ProfileScreen
Navigator.pushNamed(context, '/profile');

Advantages of named routes:

• More scalable: As your app grows, managing routes by name is far easier than scattering MaterialPageRoute instantiations throughout your codebase.

• Easy to centralize route management: All your app's main navigation paths are defined in one clear location (the routes map).

• Improved readability: Route names provide semantic meaning to your navigation actions.

Passing and Receiving Data with Named Routes

A common requirement for multi-screen apps is passing data from one screen to the next (for example, a selected car object from the list to its detail view). With named routes, the arguments property of Navigator.pushNamed is the idiomatic way to do this.

When navigating:

// From HomeScreen, passing the 'car' object to the DetailsScreen
Navigator.pushNamed(context, '/details', arguments: car);

On the receiving screen, ModalRoute.of(context)!.settings.arguments is used to retrieve the passed data. Remember to cast it to the expected type and handle nullability.

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Retrieve the Car object passed as arguments
    final Car car = ModalRoute.of(context)!.settings.arguments as Car;

    return Scaffold(
      appBar: AppBar(title: Text(car.name)),
      // ... rest of the UI using 'car' data
    );
  }
}

This pattern ensures type safety (with the as Car cast) and allows any data type to be passed, from simple strings to complex custom objects.

Backstack Management: Controlling User Flow

The Navigator manages a stack of routes. When you push a new route, it's added to the top. When you go back, the top route is popped off the stack. Understanding and controlling this backstack is crucial for a smooth user experience.

• Navigator.pop(context): This is the most common way to return to the previous screen. It removes the topmost route from the navigation stack. In our app, both DetailsScreen and ProfileScreen use this to return to HomeScreen.

    // In DetailsScreen or ProfileScreen
    ElevatedButton.icon(
      onPressed: () => Navigator.pop(context), // Go back to the previous screen
      icon: Icon(Icons.arrow_back),
      label: Text('Back'),
    )
  

• Navigator.pushReplacementNamed(context, '/newRouteName'): Use this if you don't want the user to go back to the current screen. It replaces the current route on the stack with the new one. This is ideal for scenarios like a login screen, where after successful login, you don't want the user to be able to go back to the login page using the back button.

• Navigator.pushNamedAndRemoveUntil(context, '/newRouteName', (route) => false): This powerful method pushes a new route and then removes all the previous routes until the predicate function returns true. If the predicate always returns false (as shown), it clears the entire stack and makes the new route the only one. This is perfect for login flows, onboarding, or splash screens where, once completed, the user should not be able to return to those initial screens.

Code Organization Tips for Scalable Navigation

As your app grows, maintaining a clear structure for your multi-screen components becomes vital. Here are some tips to help you keep things organized.

1. Organize by feature: Instead of dumping all screens into one folder, group files related to a specific feature. For example:

• lib/features/home/home_screen.dart

• lib/features/home/widgets/

• lib/features/details/details_screen.dart

• lib/features/profile/profile_screen.dart

2. Use dedicated folders for UI components:

• lib/widgets/ (for reusable UI widgets across features)

• lib/screens/ (for top-level screen widgets, or within feature folders)

3. Abstract navigation logic: For bigger apps, consider creating a separate file (for example, lib/utils/app_routes.dart) to hold all your named route constants and potentially even methods for simplified navigation, rather than hardcoding string literals.

Scalable Navigation: When Built-in Isn't Enough

While named routes are excellent for many applications, very large or complex apps with deep nested navigation, dynamic route generation, or specific web-based routing needs might benefit from third-party packages that offer a declarative navigation approach.

Consider packages like:

• go_router: A Google-supported package that focuses on declarative routing, deep linking, and web-friendly URLs. It maps application state to URLs, providing a powerful and flexible system.

• auto_route: This package uses code generation to automatically create routing boilerplate, reducing manual effort and potential errors for complex navigation graphs.

These solutions provide higher-level abstractions and solve common headaches associated with scaling navigation in large applications.

Understanding the Car List App Example

In this tutorial, we will be building a simple Car List App to illustrate the different navigation methods. This application will consist of these primary screens:

1. Car List Screen: This screen will display a list of cars, each with basic information like its name and year. Users will be able to tap on a car in this list.

2. Car Detail Screen: When a user taps on a car from the list, they will be navigated to this screen, which will display more detailed information about the selected car.

3. Profile Screen: When a user taps on the floating action button with the person icon, they will be navigated to the profile screen

This straightforward example will allow us to clearly demonstrate how to navigate between screens, pass data from one screen to another, and manage the navigation stack using Flutter's built-in navigation systems.

Now let’s get into our Car List App project so you can really see how this all works.

How to Set Up Your Flutter Project: The Car List App

To create this project, you'll first need Flutter installed and configured on your system. If you haven't already, ensure you have the Flutter SDK and a suitable IDE (like VS Code or Android Studio) set up.

Step 1: Create a New Flutter Project

Open your terminal or command prompt and run the following command to create a new Flutter project:

flutter create car_list_app

This command creates a new directory named car_list_app with a basic Flutter project structure inside it.

Step 2: Organize the Project Structure

Navigate into your new car_list_app directory (cd car_list_app). Inside the lib folder, you'll initially find main.dart. We're going to enhance this structure to better organize our code.

Here's the recommended directory structure for your project:

car_list_app/
├── lib/
│   ├── main.dart
│   ├── models/
│   │   └── car.dart
│   ├── data/
│   │   └── dummy_data.dart
│   ├── screens/
│   │   ├── home_screen.dart
│   │   ├── details_screen.dart
│   │   └── profile_screen.dart
│   └── widgets/
│       └── car_list_tile.dart (Optional, for more complex list items)
├── pubspec.yaml
├── ... (other Flutter project files)

Now, let's populate these files with your provided code.

Step 3: Populate the Files

1. lib/models/car.dart

This file will contain your Car data model.

// lib/models/car.dart
class Car {
  final String id;
  final String name;
  final String imageUrl;
  final String description;

  Car({
    required this.id,
    required this.name,
    required this.imageUrl,
    required this.description,
  });
}

2. lib/data/dummy_data.dart

This file will hold your static car data list. In a real application, this data would likely come from an API or database.

// lib/data/dummy_data.dart
import '../models/car.dart';

final List<Car> carList = [
  Car(
    id: '1',
    name: 'Tesla Model S',
    imageUrl: 'https://hips.hearstapps.com/hmg-prod/images/2025-tesla-model-s-2-672d42e16475f.jpg?crop=0.503xw:0.502xh;0.262xw,0.289xh&resize=980:*',
    description: 'Electric car with autopilot features.',
  ),
  Car(
    id: '2',
    name: 'BMW M4',
    imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/2021_BMW_M4_Competition_Automatic_3.0_Front.jpg/1200px-2021_BMW_M4_Competition_Automatic_3.0_Front.jpg',
    description: 'Sporty and powerful coupe.',
  ),
  Car(
    id: '3',
    name: 'Ford Mustang',
    imageUrl: 'https://images.prismic.io/carwow/c2d2e740-99e2-4faf-8cfa-b5a75c5037c0_ford-mustang-2024-lhd-front34static.jpg?auto=format&cs=tinysrgb&fit=max&q=60',
    description: 'Iconic American muscle car.',
  ),
];

3. lib/screens/home_screen.dart

This file will contain the HomeScreen widget. Notice that the imports now point to our new file locations.

// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import '../data/dummy_data.dart'; // Import dummy data
import '../models/car.dart';    // Import Car model

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Available Cars')),
      body: ListView.builder(
        itemCount: carList.length,
        itemBuilder: (context, index) {
          final car = carList[index];
          return Card(
            margin: const EdgeInsets.all(8),
            child: ListTile(
              contentPadding: const EdgeInsets.all(10),
              leading: CircleAvatar(
                radius: 40,
                backgroundImage: NetworkImage(car.imageUrl),
              ),
              title: Text(car.name, style: const TextStyle(fontWeight: FontWeight.bold)),
              subtitle: Text(car.description, maxLines: 2, overflow: TextOverflow.ellipsis),
              onTap: () {
                Navigator.pushNamed(
                  context,
                  '/details',
                  arguments: car,
                );
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => Navigator.pushNamed(context, '/profile'),
        child: const Icon(Icons.person),
        tooltip: 'Go to Profile',
      ),
    );
  }
}

4. lib/screens/details_screen.dart

This file will hold the DetailsScreen widget.

// lib/screens/details_screen.dart
import 'package:flutter/material.dart';
import '../models/car.dart'; // Import Car model

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Car car = ModalRoute.of(context)!.settings.arguments as Car;

    return Scaffold(
      appBar: AppBar(title: Text(car.name)),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Image.network(
                  car.imageUrl,
                  width: 250,
                  height: 250,
                  fit: BoxFit.cover,
                ),
              ),
              const SizedBox(height: 24),
              Text(
                car.name,
                style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 12),
              Text(
                car.description,
                style: const TextStyle(fontSize: 16),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 40),
              ElevatedButton.icon(
                onPressed: () => Navigator.pop(context),
                icon: const Icon(Icons.arrow_back),
                label: const Text('Back'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. lib/screens/profile_screen.dart

This file will contain the ProfileScreen widget.

// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
  final String profileImage = 'https://www.shutterstock.com/image-vector/young-smiling-man-avatar-brown-600nw-2261401207.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Profile')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // Center content vertically
          children: [
            CircleAvatar(
              radius: 60,
              backgroundImage: NetworkImage(profileImage),
            ),
            const SizedBox(height: 20),
            const Text(
              'John Doe',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            Text('john.doe@example.com', style: TextStyle(color: Colors.grey[600])),
            const SizedBox(height: 30),
            ElevatedButton.icon(
              onPressed: () => Navigator.pop(context),
              icon: const Icon(Icons.arrow_back),
              label: const Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}

6. lib/main.dart

Finally, your main.dart will become much cleaner, and will mainly be responsible for running the app and defining the global routes.

// lib/main.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';    // Import HomeScreen
import 'screens/details_screen.dart'; // Import DetailsScreen
import 'screens/profile_screen.dart'; // Import ProfileScreen

void main() => runApp(const MyApp()); // Add const for MyApp

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // Add const constructor

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Car List App',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialRoute: '/',
      routes: {
        '/': (context) => const HomeScreen(),      // Add const to screen widgets
        '/details': (context) => const DetailsScreen(),
        '/profile': (context) => const ProfileScreen(),
      },
    );
  }
}

Step 4: Run Your Application

After structuring your project and placing the code in the respective files, you can run your application from the root of your car_list_app directory:

flutter run

This will launch the app on your connected device or emulator. You should see the list of cars, and be able to navigate to their details and the profile screen, demonstrating the clean multi-screen architecture and routing you've implemented.

Screenshots

You can view the completed project here: https://github.com/Atuoha/routing_workshop

Conclusion

This organized structure significantly improves readability, reusability, and maintainability as your Flutter applications grow in complexity.

Building effective multi-screen applications in Flutter hinges on a clear understanding and strategic implementation of its navigation systems. From the simplicity of Navigator.push to the scalability of named routes with Navigator.pushNamed and ModalRoute.of, Flutter offers robust tools for managing your app's flow and passing essential data between screens.

By thoughtfully organizing your code and leveraging the appropriate navigation strategy, you can create user-friendly, maintainable, and scalable Flutter applications that stand out in the crowded app marketplace.

Here, we'll unravel the mysteries of breadcrumb trails in React applications. We'll dissect their types, and you'll learn how to seamlessly integrate them into your web projects for better user navigation.

Prerequisites

• Fundamentals of CSS and TailwindCSS
• Fundamentals of ES6 JavaScript and React
• Fundamentals of Routing and the React Router library ( check out this routing article if you’re unfamiliar).

What We'll Cover:

1. Understanding Breadcrumbs
2. Types of Breadcrumb Navigation
3. How to Build the Breadcrumb Component in React
4. How to Create the Breadcrumb Component Structure
   – Location-Based Breadcrumbs
   – Path-Based Breadcrumbs
   – Attribute-Based Breadcrumbs
5. Best Practices for Breadcrumbs in React
6. Conclusion

Understanding Breadcrumbs

Before we venture deeper into the intricacies of breadcrumbs, let's set the scene. Imagine the classic tale of Hansel and Gretel, where they leave a trail of breadcrumbs to find their way back home through the dense forest.

In the digital realm, breadcrumbs serve a similar purpose, albeit with a twist.

Hansel And Gretel

Breadcrumbs, in the context of web navigation, are a series of hierarchical links typically displayed at the top of a webpage. These links reflect the user's path from the homepage to the current page, allowing them to retrace their steps or navigate to higher-level pages.

These navigation aids have a fascinating history and a crucial role in guiding users through a digital space.

A typical example of what this component looks like is shown below:

Breadcrumb example: Home Page > Products Page > Single Product Page (current page)

Types of Breadcrumb Navigation

• Location-based Breadcrumbs: Like landmarks in a forest, location-based breadcrumbs show users where they are within the website's hierarchy. They show the current page's position relative to other pages on the site.
• Path-based Breadcrumbs: Like retracing your steps in the forest, path-based breadcrumbs display the user's journey through the website. They show the sequence of pages visited, helping users understand how they arrived at the current page.
• Attribute-based Breadcrumbs: These breadcrumbs highlight specific attributes or characteristics of the current page. They offer more context to the user's navigation, akin to discovering unique features along a trail.

How to Build the Breadcrumb Component in React

The first step in this section involves creating a React environment. Before you begin, make sure to install Node.js on your computer if you don't have it already.

How to Set Up a React Environment

After installing Node.js, use Vite (a modern build tool for React projects) to create a new React project. In your local terminal, run the command:

npm create vite@latest

Select React as your framework and your preferred variant.

Setting up a react environment with Vite

To install the necessary packages, run npm install and open it in your IDE.

Finally, clear the boilerplate code and start up your server using the command npm run dev.

This project will use Tailwind for styling. To get that set up, run the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After this command, a tailwind.config.js file will be created. Head into the config file, delete its content, and paste this in there instead:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, open your index.css file and paste the style configs (preferably at the top):

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, restart your dev server to get access to Tailwind.

How to Create the Breadcrumb Component Structure

Rather than building one breadcrumb component, we’re going to build all three types mentioned above so you can see how they work.

Location-Based Breadcrumbs

This type is the most basic type of breadcrumb that involves showing all the routes readily available for the user to navigate.

To begin, start by creating a Breadcrumb file and pasting in these styles:

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        </li>
      </ul>
    </div>
  );
}

Then import this file into a Home component which you also need to create:

import Breadcrumb from "./Breadcrumb";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
      </div>
    </div>
  );
}

At the moment, your component looks like this:

Breadcrumb after rendering on UI

To perform navigation functionalities with this component, start by installing React Router (a widely used library for managing navigation and routing in React applications).

npm i react-router-dom

Then create the routes in your App component.

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import About from "./About";
import FAQ from "./FAQ";
import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />} />
          <Route path="about" element={<About />} />
          <Route path="faq" element={<FAQ />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

The code block above is a configuration for client-side routing in a React application using React Router v6. It sets up a BrowserRouter to handle dynamic routing and defines a series of Route components within Routes to map URL paths to React components.

• BrowserRouter is a router implementation that uses the HTML5 history API to keep the UI in sync with the URL.
• Navigate redirects users to a specific route. In this case, it redirects from the index route to /home.
• Route components define a mapping between a path and a component. The element prop specifies what to render when the path matches the current URL.
• The path="/" element={<Home />} route is a nested route that serves as a layout for its child routes. It renders the Home component when the URL is /. Nested inside the Home route are routes for home, products, about, and faq, each rendering their respective components when their path matches the URL.

Next, head over to your Breadcrumb component and change the list elements to Link elements (imported from React Router) to aid routing between routes.

import { Link } from "react-router-dom";
import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        </Link>
      </ul>
    </div>
  );
}

Then use the Outlet component provided by React Router to display the content of each route in the Home component.

import Breadcrumb from "./Breadcrumb";
import { Outlet } from "react-router-dom";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
        <Outlet />
      </div>
    </div>
  );
}

Testing out your component in the browser now gives the following result:

Routing with the Breadcrumb component

With this, your location-based breadcrumbs are functional, but we can take it a step further. To improve the UX, we can add an active class to the currently active route, creating a visual indicator of where the user is at every point in time.

Start by extracting the current location of the user in the Breadcrumb component:

  const location = useLocation();

Then use the pathname property to add an active class to each link:

import { Link, useLocation } from "react-router-dom";

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  const location = useLocation();
  console.log(location.pathname);

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/products" && "bg-[#b572d6] text-white"
          }`}>
          Products
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/about" && "bg-[#b572d6] text-white"
          }`}>
          About
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/faq" && "bg-[#b572d6] text-white"
          }`}>
          FAQ
        </Link>
      </ul>
    </div>
  );
}

This now gives the following result:

Routing with the Breadcrumb component after adding an active class

Tasty! 🍩

Path-Based Breadcrumbs

This breadcrumb type uses the pattern of progressive reveal to better guide the users on where they are based on their actions.

Here we’re going to create two routes and move from the first to the third (Home to Single product page).

Start by modifying your Home component a bit.

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
        <Outlet />

        <div className="flex gap-4 p-2 ">
          <Link to="products" className=" rounded-md p-2 bg-[#777] text-white">
            Products
          </Link>
          <Link
            to="products/1"
            className=" rounded-md p-2 bg-[#777] text-white">
            Single Product
          </Link>
        </div>
      </div>
    </div>
  );
}

The changes include creating a single product page which we'll route to later.

Then make a nested route path for the page in the App component:

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";
import SingleProduct from "./SingleProduct";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />}>
            <Route path=":productId" element={<SingleProduct />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

For the already existing Products page, add these styles and changes:

import { Outlet } from "react-router-dom";

export default function Products() {
  return (
    <div className="bg-[#EDBB99] p-2 w-96 h-96 flex flex-col items-center">
      <h1>Products Page</h1>
      <Outlet />
    </div>
  );
}

Page after creating the Single Product page without any routing

Finally, modify your breadcrumb component to display the routes when you route to them from the home page.

import { Link, useLocation } from "react-router-dom";

import RightArrowImg from "./assets/right-icon.png";

export default function Breadcrumb() {
  const location = useLocation();

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] hover:text-black p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        </Link>
        {location.pathname.includes("/products") && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={` hover:text-black cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                " bg-[#b572d6] text-white"
              } ${
                location.pathname.includes("/products/") &&
                " bg-[#E8DAEF] text-black"
              }`}>
              Products
            </Link>
          </>
        )}
        {location.pathname.includes(`/products/`) && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={`hover:text-black  cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                "bg-[#b572d6] text-white"
              }`}>
              Single Product
            </Link>
          </>
        )}
      </ul>
    </div>
  );
}

In the code above, we’re displaying more breadcrumbs based on the route we’re in and applying styles to reflect the route changes.

Testing our component now gives the following result:

Routing with the Breadcrumb component after adding a nested route

Sweet! 🍬

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs focus on highlighting specific attributes or characteristics of the current page, such as tags, categories, or any other relevant metadata.

Instead of simply showing the user's path through the website hierarchy, they provide additional context that can aid in navigation and understanding.

A common use case for them is on E-commerce sites where you go through multiple items and filter through multiple product properties to find your desired product.

To begin, our app component is going to look drastically different with no routing done.

import Products from "./Products";

export default function App() {
  return (
    <div className=" h-[100dvh] bg-[#EDBB99]">
      <Products />
    </div>
  );
}

Then add this JSX to your Products component:

import Breadcrumb from "./Breadcrumb";

export default function Products() {
  const dogsArray = [
    {
      size: "S",
      color: "white",
      image: "/small-white-dog.jpg",
      name: "Gigi",
      age: 1,
    },
    {
      size: "M",
      color: "white",
      image: "/medium-white-dog.jpg",
      name: "Tom",
      age: 2,
    },
    {
      size: "L",
      color: "white",
      image: "/big-white-dog.jpg",
      name: "Jake",
      age: 3,
    },
    {
      size: "S",
      color: "black",
      image: "/small-black-dog.jpg",
      name: "Hill",
      age: 1,
    },
    {
      size: "M",
      color: "black",
      image: "/medium-black-dog.jpg",
      name: "Jack",
      age: 2,
    },
    {
      size: "L",
      color: "black",
      image: "/big-black-dog.jpg",
      name: "Jones",
      age: 3,
    },
    {
      size: "S",
      color: "brown",
      image: "/small-brown-dog.jpg",
      name: "Herbert",
      age: 1,
    },
    {
      size: "M",
      color: "brown",
      image: "/medium-brown-dog.jpg",
      name: "Coco",
      age: 2,
    },
    {
      size: "L",
      color: "brown",
      image: "/big-brown-dog.jpg",
      name: "Benny",
      age: 3,
    },
  ];


  return (
    <div className="flex flex-col items-center p-2">
      <h1 className="p-4">Adopt Page</h1>
      <Breadcrumb />
      <main>
        <div className="relative grid grid-cols-5 gap-6">
          {dogsArray.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              </div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:</span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Size:</span>
                  <p className="text-center text-white min-w-14">{dog.size}</p>
                </div>
                <div className="flex gap-2 ">
                  <span>Color:</span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Age:</span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter by</h2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:</h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                </button>
              </div>
            </div>
            <div className="flex items-center">
              <h3 className="w-12">Color:</h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14`}>
                  White
                </button>
                <button
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                </button>
                <button
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

This JSX uses dummy dog data to create a template and style it with tailwind.

At the moment, your app should look like this;

Page after looping over the dummy dog data

To implement the attribute-based breadcrumbs, start by creating two states for the attributes you want to filter by:

const [sizeFilter, setSizeFilter] = useState(null);
const [colorFilter, setColorFilter] = useState(null);

Then create a function to filter based on the value passed in:

  const filteredDogs = dogsArray.filter((dog) => {
    if (sizeFilter && dog.size !== sizeFilter) return false;

    if (colorFilter && dog.color !== colorFilter) return false;

    return true;
  });

After that, change the array you used used to create the JSX to the array returned from the function:

 {filteredDogs.map((dog) => (
            <div key={dog.name}>

Finally, use the setter function to pass in the values you want to filter by:

<main>
        <div className="relative grid grid-cols-5 gap-6">
          {filteredDogs.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              </div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:</span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Size:</span>
                  <p className="text-center text-white min-w-14">{dog.size}</p>
                </div>
                <div className="flex gap-2 ">
                  <span>Color:</span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Age:</span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter by</h2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:</h3>
              <div className="flex gap-2">
                <button
                  // Reset size state
                  onClick={() => setSizeFilter(null)}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  // Set filter to small
                  onClick={() => setSizeFilter("S")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                </button>
                <button
                  // Set filter to medium
                  onClick={() => setSizeFilter("M")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                </button>
                <button
                  // Set filter to large
                  onClick={() => setSizeFilter("L")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                </button>
              </div>
            </div>
            <div className="flex items-center">
              <h3 className="w-12">Color:</h3>
              <div className="flex gap-2">
                <button
                  // Reset color state
                  onClick={() => setColorFilter(null)}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  // Set color to white
                  onClick={() => setColorFilter("white")}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  White
                </button>
                <button
                  // Set color to brown
                  onClick={() => setColorFilter("brown")}
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                </button>

                <button
                  // Set color to black
                  onClick={() => setColorFilter("black")}
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>

Testing your component now gives the following result:

Filtering by properties working

Exquisite!🍦

To add our breadcrumb functionality, pass in the filter props to the component like this:

<Breadcrumb sizeFilter={sizeFilter} colorFilter={colorFilter} />

Then use those props to render the headers:

import RightArrowImg from "./assets/right-icon.png";

export default function Breadcrumb({ sizeFilter, colorFilter }) {
  return (
    <div className="mb-4 bg-gray-200 rounded-md ">
      <ul className="   flex items-center  text-xl text-[#2E4053] text-left">
        <li className={`cursor-pointer p-4 rounded-md `}>All</li>

        {sizeFilter && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <li className={`cursor-pointer p-4 rounded-md capitalize`}>
              {sizeFilter}
            </li>
          </>
        )}
        {colorFilter && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <li className={`cursor-pointer p-4 rounded-md capitalize`}>
              {colorFilter}
            </li>
          </>
        )}
      </ul>
    </div>
  );
}

Before we see the final result, let’s add indicators of what filter props are currently active:

<main>
        <div className="relative grid grid-cols-5 gap-6">
          {filteredDogs.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              </div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:</span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Size:</span>
                  <p className="text-center text-white min-w-14">{dog.size}</p>
                </div>
                <div className="flex gap-2 ">
                  <span>Color:</span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Age:</span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter by</h2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:</h3>
              <div className="flex gap-2">
                <button
                  onClick={() => setSizeFilter(null)}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === null
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  All
                </button>
                <button
                  onClick={() => setSizeFilter("S")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "S"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  S
                </button>
                <button
                  onClick={() => setSizeFilter("M")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "M"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  M
                </button>
                <button
                  onClick={() => setSizeFilter("L")}
                  className={`p-2 text-center  rounded-md min-w-14 ${
                    // Dynamic background color add
                    sizeFilter === "L"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  L
                </button>
              </div>
            </div>
            <div className="flex items-center">
              <h3 className="w-12">Color:</h3>
              <div className="flex gap-2">
                <button
                  onClick={() => setColorFilter(null)}
                  className={`p-2 text-center   rounded-md min-w-14 ${
                    // Dynamic background color add
                    colorFilter === null
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  All
                </button>
                <button
                  onClick={() => setColorFilter("white")}
                  className={`p-2 text-center   rounded-md min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "white"
                      ? "bg-orange-900 text-white"
                      : "bg-white text-black "
                  }`}>
                  White
                </button>
                <button
                  onClick={() => setColorFilter("brown")}
                  className={`p-2 text-center rounded-md   min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "brown"
                      ? "bg-orange-900 text-white"
                      : " bg-white text-black "
                  }`}>
                  Brown
                </button>

                <button
                  onClick={() => setColorFilter("black")}
                  className={`p-2 text-center rounded-md    min-w-14 ${
                    // Dynamic background color add
                    colorFilter === "black"
                      ? "bg-orange-900 text-white"
                      : " bg-white text-black"
                  }`}>
                  Black
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>

A final test on your component now gives this result:

Filtering via properties and showing it in the breadcrumb

And voilà! Your component filters perfectly, and also shows a useful breadcrumb to help users know what properties they’ve filtered by.

Bruce Almighty Jim Carrey beautiful gif

Best Practices for Breadcrumbs in React

When implementing breadcrumbs in React, it's crucial to follow certain best practices to ensure a seamless user experience. Here are some key points to consider:

1. Consistency with React Routing: Breadcrumbs should align with the application's routing structure. You can do this by implementing dynamic breadcrumbs using a good routing library (React Router). By defining routes and generating an array of breadcrumbs based on the user's current route, you can ensure that the breadcrumb trail reflects the user's navigation path.
2. Breadth and Depth of Breadcrumb Trails: Breadcrumb trails should represent the user's location within the application. This includes using a separator, such as a slash ("/"), to distinguish between different parts of the breadcrumb trail.
3. Naming and Navigation: Breadcrumbs should be easy to understand and navigate. This involves using clear and descriptive names for each breadcrumb and ensuring that each breadcrumb link is clickable, leading the user to the appropriate page.
4. Ensuring Accessibility: Breadcrumbs should be accessible to all users. This can be achieved by using the aria-label attribute to identify the breadcrumb trail as a navigation landmark. This makes it easier for users with assistive technologies to locate and navigate the breadcrumb trail.
5. Customization and Ease-of-Use: When using a component for creating breadcrumbs, consider its customization options and ease of use. Look for components that provide useful defaults and allow for easy customization of texts, links, and separators.

By adhering to these best practices, you can create effective and user-friendly breadcrumbs in your React applications.

Here are links to the repositories on GitHub:

• Location-based
• Path-based
• Attribute-based

Conclusion

Implementing breadcrumbs in React applications not only provides a navigational aid but also contributes to a seamless and intuitive user experience. Adhering to best practices enhances the usability and accessibility of applications.

Just as the aroma of freshly baked bread entices hungry people to come visit the bakery, a well-structured breadcrumb trail can entice users to explore and navigate an application with ease, ultimately improving user navigation and experience. And that's how the cookie crumbles, leaving a trail of delightful navigation in its wake.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

This article will guide you through the transformative journey of URLs as state managers in the context of React applications.

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript
• Fundamentals of React, React Router and React Hooks.

The Evolution of State Management in React

Let's journey through the past:

• setState: In the early days of React, many relied on component state, especially within class components. It was straightforward to manage component-specific data. But it wasn't ideal for larger applications.
• Redux & MobX: As applications grew in complexity, tools like Redux and MobX emerged. They centralized data management, making it easier to handle app-wide data.
• Context API & Hooks: React's own Context API, combined with the advent of hooks, brought about a more native way to manage the global state without adding extra libraries.

Managing State with URLs

At first, using a URL for managing state might seem unusual. But as you explore further, you'll discover several clear benefits:

• Save Your Spot: By keeping state in the URL, your webpage remembers your place. So, if you bookmark a page, it will look the same when you come back to it later.
• Easy Sharing: If you're looking at something specific on a page, like a product or a chart, you can share the URL. Anyone who clicks it will see exactly what you’re seeing, making collaboration a breeze.
• Troubleshoot with Ease: Developers can find and fix issues faster because the URL shows the state of the app. They can see problems just by clicking on the shared link.

In short, using URLs in this way helps keep your spot, share specific views, and makes problem-solving smoother for developers.

How to Implement URL-based State Management

Considering the size of this section, here’s everything you’ll learn.

1. How to Set Up the Environment
2. Clearing the clutter
3. Project Breakdown / Analysis
4. Install the Necessary Dependencies
5. How to Fetch the Data and Design the UI
6. How to Store State in the URL
7. How to Read the State Stored in the URL
8. How to Customize the Product Page

How to Set Up the Environment

Open your inbuilt terminal or code editor’s terminal (preferably) and run the following:

npm create vite@latest

This command uses Vite (a lightweight tool that is used for building fast and optimized web applications) to scaffold a web app environment. Navigate down using your arrow keys and select React.

Selecting React from Vite Setup

Then select your preferred language combination – I’ll be using plain JS.

Selecting Language in React

Next, move into your react folder using the cd “project-name” folder and run npm install to install all the project’s dependencies.

Finally, start the development server by running npm run dev and going to the respective URL (http://localhost:5173/).

Dev Server running

Clearing the clutter

Make sure to clear the contents of all the CSS files and delete the App.css as you’ll need only 1 style file. Then, clear the contents of the App component and replace it with basic JSX content.

Clutter Cleared in Dev Environment

This returns a clear page on your local server that looks like this:

Clear Server page

Project breakdown / analysis

The project involves getting data from an API and persisting that data globally via the URL to be accessible across many components/pages.

A relatable example is when you’re on your favourite e-commerce site, you may see this cool gadget and want to share it with your friend.

You usually share the link from the browser to your friend’s social media DM which they can use to view the same product without any fuss by opening the link you sent to them.

Here’s a sneaky peek at the project we're going to build: 😉

Sneaky peek of complete project

Intrigued?🌚 Let’s dive in then.

Install the necessary dependencies

Before you put anything on the page, you must first fully configure your development environment with the necessary dependencies.

• json-server: This package hosts your data on a local server, enabling you to fetch it like an external API.
• react-router: This package enables React to create SPAs that allow navigating without refreshing the page.

npm i json-server react-router-dom

Installing dependencies

• Then download the JSON data from this GitHub(json-data), and the assets from this GitHub(assets-data).

Now create a data folder in your root project directory and place the JSON file inside. Then create an assets folder in your public directory and place all images in that assets folder.

Your current folder structure should be like this:

Folder structure after downloading files

Next, modify your package.json file by adding a script which starts up the json-server

"server": "json-server --watch data/products.json --port 9000 "

Adding server script to package.json

After that, open your terminal and start up the server with npm run server:

Starting data server

With this, your server is running and the content of your JSON file can be accessed through the URL provided.

Data on Browser

Ps: If you want to view JSON files in the browser like I do, download the browser extension – JSON Viewer.

How to fetch the data and design the UI

Start by creating a HomePage component and importing it into the App component. This component will contain all the data in the first screen you saw earlier.

Importing the Homepage

In the HomePage component, use a useEffect hook to fetch all the data from your local API.

import { useEffect } from "react";

export default function HomePage() {
  useEffect(function () {
    async function fetchData() {

      try{
      const res = await fetch("http://localhost:9000/products");
      const clothesData = await res.json();
      console.log(clothesData);   
      }
      catch (error) {  console.log(error);}
      }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
    </main>
  );
}

At the moment, you can already view the data fetched in the console.

Evidence of data fetching

Next, store your data in a state using the useState hook and populate your interface with that data.

import { useEffect, useState } from "react";

export default function HomePage() {
  const [products, setProducts] = useState([]);

  useEffect(function () {
    async function fetchData() {
      try {
        const res = await fetch("http://localhost:9000/products");
        const clothesData = await res.json();
        console.log(clothesData);
        //Storing happens here
        setProducts(clothesData);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
      <div className="products__list">
        {products.map((product) => (
          <div
            key={product.id}
                      className="product__item"
          >
            <img loading="lazy" src={product.imageUrl} alt="" />
            <h2>{product.itemName}</h2>
          </div>
        ))}
      </div>
    </main>
  );
}

All the styling required in this project is in this CSS file. Alternatively, you can paste these stylings in your index.css, which gives the same result.

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Nunito", sans-serif;
}

h1 {
  text-align: center;
  font-weight: 700;
  font-size: 3rem;

  & span {
    cursor: pointer;
    margin-right: 3rem;
  }
}

a,
h3 {
  text-decoration: none;
  color: #a04000;
}

img {
  width: 100%;
  display: block;
  transition: all ease-in 0.3s;
}

.homepage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-direction: column;
  gap: 3rem;

  & > * {
    width: 100%;
  }
}

.products__list {
  column-count: 1;
  column-gap: 2rem;
  padding: 2rem;

  & > * {
    break-inside: avoid;
    margin-bottom: 2rem;
  }

  & .product__item {
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    position: relative;
    transition: all ease-in 0.3s;

    & h2 {
      background: #fff;
      bottom: 5px;
      left: 5px;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      z-index: 2;
      position: absolute;
      transition: all ease-in 0.3s;
    }

    &:hover img {
      scale: 1.1;
    }

    &:hover h2 {
      transform: translate(10px, -10px);
    }
  }
}

.single__product {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 4rem;
  border-radius: 1rem;
  overflow: hidden;

  & section {
    display: flex;
    justify-content: center;
    flex-direction: column;

    & figure {
      border-radius: 1rem;
      overflow: hidden;

      & .product__img {
        width: 100%;
      }
    }

    & aside {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.5rem;

      & > h2 {
        font-size: 2.5rem;
      }
      & > h3 {
        font-size: 1.6rem;
      }
      & span {
        background: rgba(160, 64, 0, 0.5);
        padding-inline: 1rem;
        align-self: flex-start;
      }
    }
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .products__list {
    column-count: 2;
  }

  .single__product {
    & section {
      flex-direction: row;

      & .product__img {
        max-width: 300px;
      }
    }
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .homepage {
    padding: 2rem 4rem;
  }
  .products__list {
    column-count: 3;
  }
}

At the moment, your home page should already look identical to the demo version.

Home page with styles added

How to store state in the URL

In order to manage and share state across multiple pages using the URL, you first need to define routes using the react-router package.

Start by creating a route for the homepage:

import { BrowserRouter, Route, Routes } from "react-router-dom";

import HomePage from "./HomePage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<HomePage />} />
      </Routes>
    </BrowserRouter>
  );
}

• The BrowserRouter component wraps your entire application or the part of your app where you want to use routing.
• The Routes component wraps all your Route components and is responsible for rendering the first route that matches the current location.
• The Route component represents a single route in your application.

Next, create a ProductItem component responsible for showing a single item and its equivalent route.

import { BrowserRouter, Route, Routes } from "react-router-dom";

import HomePage from "./Homepage";
import ProductItem from "./ProductItem";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<HomePage />} />
         <Route path="product" element={<ProductItem />} />
      </Routes>
    </BrowserRouter>
  );
}

To view the ProductItem component, head over to your HomePage and wrap each individual product with a Link element pointing to the product page with their unique ID.

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function HomePage() {
  const [products, setProducts] = useState([]);

  useEffect(function () {
    async function fetchData() {
      const res = await fetch("http://localhost:9000/products");

      const clothesData = await res.json();
      console.log(clothesData);
      setProducts(clothesData);
    }
    fetchData();
  }, []);

  return (
    <main className="homepage">
      <h1>Homepage of my Dummy Product Page</h1>
      <div className="products__list">
        {products.map((product) => (
          <Link
            key={product.id}
           // Moving to the product page
           to={`/product?id=${product.id}`}
            className="product__item"
          >
            <img loading="lazy" src={product.imageUrl} alt="" />
            <h2>{product.itemName}</h2>
          </Link>
        ))}
      </div>
    </main>
  );
}

Clicking on any product now routes you to the product page and shows the ProductItem component.

On closer observation, you may notice that the id of each item is appended to the URL via its id property (for example: product?id=12345678). This implies that you have successfully stored the id state to the URL.

How to read the state stored in the URL

In order to show data for each product, you have to read the state stored in the URL.

To implement this, start by creating a new custom hook (this helps for reusability). In your custom hook, import the useSearchParams hook.

import { useSearchParams } from "react-router-dom";

export function useURLID() {
  const [searchParams] = useSearchParams();
}

The useSearchParams hook allows you to interact with the query parameters of the URL (part of the URL that comes after the ? as seen in your URL earlier).

In order to retrieve the values from the URL, use the get method and pass in the name of the value you want to retrieve, in this case, the id.

import { useSearchParams } from "react-router-dom";

export function useURLID() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");
  return { id };
}

To test out your hook, import it into the ProductItem page and extract the values.

import { useURLID } from "./useURLID";

export default function ProductItem() {
  const { id } = useURLID();
  return <div>Product Item {id}</div>;
}

And voilà! Your id state is now global and can used by any component in your app. Bravo!

How to customize the Product Page

In order to fully achieve what was shown in the demo, perform another fetch based on the id to get the data for that product.

Start by creating states to store the data and account for the data loading.

const [singleProduct, setSingleProduct] = useState({});
const [loading, setLoading] = useState(false);

Then use a useEffect hook to fetch and store the data based on the unique product id.

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:9000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

Next, use the data received to populate the interface.

import { useEffect, useState } from "react";
import { useURLID } from "./useURLID";


export default function ProductItem() {
  const { id } = useURLID();
  const [singleProduct, setSingleProduct] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:8000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);



  // If loading, display the loading div
  if (loading) return <div>Loading...</div>;

  // If not loading, display the product details
  return (
    <div className="single__product">
      <h1>
               <span>
          {singleProduct.itemName} Page id: {id}
        </span>
      </h1>
      <section>
        <figure className="product__img-container">
          <img
            className="product__img"
            src={singleProduct.imageUrl}
            alt="Image"
          />
        </figure>
        <aside>
          <h2>{singleProduct.itemName}</h2>
          <h3>{singleProduct.notes}</h3>
          <h4>
            Category: <span>{singleProduct.type}</span>
          </h4>
          <p>
            Width: <strong>{singleProduct?.size?.width}</strong>
          </p>
          <p>
            Length: <strong>{singleProduct?.size?.length}</strong>
          </p>
        </aside>
      </section>
    </div>
  );
}

Finally, account for easy navigation by providing a back button to go to the home page. You can do this using the useNavigate hook in react-router. This hook provides a function that allows you to programmatically navigate to other parts of your application.

Simply import the useNavigate hook, and initialize it with a variable like this:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

Then call this function with an event handler, and pass in the home page route.

import { useEffect, useState } from "react";
import { useURLID } from "./useURLID";
import { useNavigate } from "react-router-dom";

export default function ProductItem() {
  const { id } = useURLID();
  const [singleProduct, setSingleProduct] = useState({});
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const res = await fetch(`http://localhost:9000/products/${id}`);

        const data = await res.json();

        setSingleProduct(data);
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [id]);

  const navigate = useNavigate();

  // If loading, display the loading div
  if (loading) return <div>Loading...</div>;

  // If not loading, display the product details
  return (
    <div className="single__product">
      <h1>
       // Navigate to the home page
        <span onClick={() => navigate("/")}>🔙 </span>
        <span>
          {singleProduct.itemName} Page id: {id}
        </span>
      </h1>
      <section>
        <figure className="product__img-container">
          <img
            className="product__img"
            src={singleProduct.imageUrl}
            alt="Image"
          />
        </figure>
        <aside>
          <h2>{singleProduct.itemName}</h2>
          <h3>{singleProduct.notes}</h3>
          <h4>
            Category: <span>{singleProduct.type}</span>
          </h4>
          <p>
            Width: <strong>{singleProduct?.size?.width}</strong>
          </p>
          <p>
            Length: <strong>{singleProduct?.size?.length}</strong>
          </p>
        </aside>
      </section>
    </div>
  );
}

Testing your final result now gives the following:

Final take showing all features

Real-World Examples

• E-commerce platforms: Think of sites like Amazon. They use URLs to let you share specific product searches or settings. Thanks to this, people can easily share their favourite items or shopping lists with friends.
• Data Tools: Tools like Tableau save your custom views in the URL. This means teams can share specific data pictures with each other, making talks, shows, and decisions faster and clearer.

Additional Information

I’d like to point out a couple of things in the article not highlighted.

• The CSS used contains native CSS nesting that isn’t fully supported by all browsers, so if there are UI irregularities you notice, it may be from the browser you’re using. Feel free to switch to a browser like Google Chrome for better support or check for browser support with a tool like CanIUse and add polyfills to your code.
• If this article delved into things that were a tad complicated for you (how routing works), feel free to check out this article on Routing Animations for a better understanding.
• If you’re interested in the full code, here’s the repo, GitHub, and the Live version is here. Demo
• As an added feature, I made the code fully responsive for anyone interested in creating masonry grids for future projects, cheers!🍷

Conclusion

React's state management has evolved, with URL-based state emerging as a standout. This method not only simplifies state management but also fosters collaboration and transparency between users and developers.

So, the next time you're online and think of sharing data via a URL, remember that you have the tools to implement this feature yourself 😉. It's a nudge for developers to explore the untapped potential of URLs in state management.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

With the introduction of the App Router in 2023, the framework has once again stirred the pot, leaving many of us scratching our heads and pondering, "Do we stick with the tried-and-true Pages directory or embrace the shiny new App Router?".

In this exploration, we will delve into the unique facets of the App Router, offering valuable guidance for navigating these new features.

Prerequisites

• A good understanding of JavaScript.
• A good understanding of React.js and Next.js.

A Brief Look at Routing

Routing is a critical aspect of web apps that enables users to move between various pages. It guarantees that users can access different parts of an application, whether they are moving from a homepage to a product listing or navigating within single-page applications.

The Pages Directory and App Router are two crucial components that determine how users navigate through a Next.js application.

How the Pages Directory Works in Next.js

While the spotlight shines on the new App Router, let's not forget the solid foundation provided by the Pages Directory. A key difference between the two lies in route generation.

The Pages Directory automatically creates routes within the pages folder, whereas the App Router organizes routes within the app folder. This folder routing system maintains developer familiarity with how routing works while introducing a shift in route organization.

This distinction enables efficient route management and facilitates a seamless transition between the two routing mechanisms.

How to Set Up the Pages Directory

To set up the Pages Directory for routing, you must first create a Next application. You can do this by running the command below on your local or code editor's terminal:

npx-create-next-app your-app-name

A list of configuration options appear underneath your command. Select "No" for App Router during the application setup. This creates a pages folder from which you can create routes.

Folder directory installation and setup

How to Create a Route with Pages Directory

To create a route, create a folder in the pages folder and call it whatever you want the route to be (about, for example).

Then nest an index.js file in the about folder and fill it in with whatever content you want.

To route between pages, you can use the Next.js link component and pass in the corresponding URL you wish to route to.

Folder directory example

Here's the result:

Implementing routing using the folder directory

Limitations of the Pages Directory

The Pages Directory provides a great way to structure routes in a Next.js application, but it has some limitations. Here are a few things to keep in mind:

• Static exports: The Pages Directory configuration relies on dynamic routes generated using getStaticProps and getStaticPaths. This means that not all pages in the directory can be statically exported.
• Edge Runtime configuration: If you're using the Edge Runtime, you may need to do extra configuration beyond what's possible in the Pages Directory.
• Internationalization routing: While Next.js supports internationalization routing, you need to configure locales, default locales, and domain-specific locales in the next.config.js file instead of the Pages Directory.
• Serverless functions: API routes defined in the Pages Directory can handle basic API functionality, but more complex serverless functions may need extra configuration and alternative file placement.
• Statically generated pages distribution: Statically generated pages may not be optimized for visitors without additional CDN configuration or "vendoring". This can impact the performance and distribution of statically generated pages.

How the App Router Works in Next.js

The App Router is the fresh face on the Next.js scene, designed to address some of the limitations of the Pages Directory approach. While the app router still uses the folder directory for routing, it does so with a slightly different convention.

How to Setup the App Router

To set up the App router , follow the same installation process as mentioned in the pages directory, but opt for "Yes" when prompted to use the App Router during setup. This creates an app directory.

App Router installation and setup

How to Create a Route with App Router

Routing with the App Router also involves creating folders but within the app directory. Nest a page.js file within the appropriate folder to define your route.

Folder directory example

Here's the result:

Implementing routing using the app router

Features of App Router in Next.js

Apart from routing, App Router boasts a range of other features, including:

Layout Component

A layout component is a versatile UI element that shapes a page's structure. It can include components like headers, footers, and sidebars, and even offer shared functions like navigation.

Layout components work with routing, enabling smooth transitions between app pages. Since the layout component remains active when routes change, its state is retained, ensuring consistent and reusable layouts with minimal effort.

This component is designed to receive a children prop and wrap all page files in the same directory with it:

export default function layout({ children }) {
  return <div className="layout">{children}</div>;
}

Here’s an example that uses a layout component (a grey box) like the one in the code above between the user page and the settings page:

Creating a layout component that shares styles with its sibling pages

In the image above, the layout.js component is shared by both the user and settings pages. So both pages will have the styles and logic in the layout component.

And the result:

Implementing the layout component on the user and settings page

Nested Layouts

These are layouts defined inside folders and apply to specific route segments and render when those segments are active. It allows you to define multiple levels of layout components, each enclosing the content of its child components.

This feature provides a flexible and modular way to structure your application's UI.

Demonstrating how layout work with sibling and child pages

In the diagram above, the styles and logic in the first layout file applies to all pages inside the dashboard directory, while the second layout file applies to the pages in the developer directory.

Template Components

Template components are like layouts, but they create a new instance for each child on navigation. This means recreating DOM elements, losing state, and resetting effects every time the route changes.

You can use them for things like tracking page views or interactive widgets. You can create a template by exporting a default React component from a template.js file. This component should be designed to receive a children prop.

export default function Template({ children }) {
  return <div>{children}</div>
}

Loading Component

This component can be made in any app folder directory. It auto-wraps pages with a React suspense boundary (that is, a component that helps manage loading moments when components need to fetch data or resources asynchronously). It shows on the first load and during sibling route navigation.

It looks something like this under the hood:

<Suspense fallback={<Loading />}>
   <YourComponent />
</Suspense>

Showcasing the loading component in use

Streaming

This involves sending parts of a webpage progressively from the server to the user's device. Unlike the traditional Server-Side Rendering (SSR), where all the data must be fetched before rendering, streaming sends smaller chunks of HTML as they're ready.

Before streaming

Displaying how SSR worked before stream was introduced

In the image above, no content is displayed while the page is being rendered. The component waits until all the contents are ready.

Using streaming

How SSR now works with streaming

In the image above, the component doesn't wait for all the page content, it renders each one as soon as it's ready.

This speeds up the initial page display, prioritizing higher-priority components for early interactivity. Streaming reduces [Time To First Byte](https://en.wikipedia.org/wiki/Time_to_first_byte#:~:text=Time%20to%20first%20byte%20(TTFB,received%20by%20the%20client's%20browser.) (TTFB), enhances interactivity, and works well with React's component model.

It's works by using the <Suspense> component, improving loading and user experience, especially on slower devices.

Error Component

This component confines errors to the app's tiniest section. Making an error file auto-encloses the page with a React error boundary. Any error within this file's folder swaps the component with its contents.

The error component is rendered like this behind the scenes:

<Layout>
  <ErrorBoundary fallback={<Error />}>
    <Page/>
  </ErrorBoundary>
</Layout>

And shows something like this;

Showcasing the error component in the case of an error

Route Groups

Route Groups organize routes in the app directory without altering URL paths. Enclosing a folder name in parentheses creates a Route Group that keeps related routes together.

This allows for logical grouping, nested layouts, and a clean URL structure. That is:

How to use route groups to organize routes

In the example above, authentication pages are grouped together for better organization, without altering URL structure.

Server Components

Server components, a prime addition to the App Router, renders on the server and streams to the client. This accelerates page loading and enhances performance. They speed up page load times as different page contents are loaded in small chunks and independently.

Note that they don't support client-side actions like click events and React hooks (useState , useRef). To convert a server component into a client component, mark it with use client at the beginning of the file.

Here's an example:

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Data Fetching

Server components bring a fresh data fetching pattern, allowing async components to fetch data within them. This reduces reliance on APIs like getServerSideProps.

To fetch data, mark a component as async and use the fetch function within:

export default async function Home() {
  const response = await fetch("https://api.adviceslip.com/advice");
  const data = await response.json();
  return (
    <main>
      <h1>Home Page</h1>
      <p>{data.slip.advice}</p>
    </main>
  );
}

And get your result on the page like this:

Using the fetch function in a server component

The App Router also caches the fetched data on the server, eliminating the need to re-fetch that data on every request, unless a revalidation parameter is passed in in the fetch function:

export default async function Home() {
  const response = await fetch("https://api.adviceslip.com/advice", {
    next: { revalidate: 5 },
  });

The code above causes a re-fetch of new data every 5 seconds.

Built-in SEO

Another feature of the Next.js App router is the built-in Metadata API, used as an SEO tool to optimize websites for search engines. This API provides a range of SEO settings, including the Open Graph protocol, to enhance the visibility of websites to search engines.

There are two methods of implementing this — static and dynamic methods.

Here's the static approach:

import { Metadata } from "next";

export const Metadata = {
  title: "Blog page title",
  description: "Blog page description",
};

export default function page() {
  return (
    <main>
      <h1>Blog Page</h1>
    </main>
  );
}

Here's the dynamic approach using the getMetadata function:

export async function generateMetadata({ params, searchParams}) {

const id= params.id

   const blog= await fetch(`https://blog/${id}`).then((res) =>res.json()

  return { 
        title: blog.title,
        Description: blog.description,
   };

}

export default function Page({ params, searchParams }) {}

Advanced Features of App Router in Next.js

While we've covered notable aspects, the App Router's capabilities extend beyond what we've discussed. Features like server actions, data revalidation, parallel routes, and route interception provide further utility.

As always, you can turn to the Next.js docs for a wider range of information to elevate your understanding and mastery of these additions to the Next.js ecosystem.

Pages Directory vs App Router - Which to Use?

In the rapidly evolving world of web development, it's easy to get caught up in the hype surrounding new technologies and tools. However, when it comes to choosing between the Pages Directory and the App Router, it's important to strike a balance between excitement and caution.

Both options have their own strengths and considerations, and understanding your needs and goals will help you determine which one to use in a given context.

Selecting the Appropriate Tool for Your Requirements

When making the choice between the Pages Directory and the App Router, it is crucial to take into account your individual needs and objectives. Here are a few factors to bear in mind:

1. Stability vs Flexibility: If your main concerns are stability and user-friendliness, the Pages Directory is a dependable option. It provides a solid foundation for simple routing tasks. However, if you require more flexibility and the ability to customize, the App Router might be a more suitable choice.

2. Development speed: The Pages Directory offers a fast and efficient approach to creating and managing pages, making it ideal for speedy development. Conversely, due to its advanced capabilities, the App Router may cause more upfront configuration and development effort.

3. Complex routing scenarios: If your application requires intricate routing scenarios like nested routes or dynamic routing based on external data, the App Router's programmability can be a significant advantage.

Ultimately, the key to making well-informed decisions lies in staying knowledgeable about the capabilities and trade-offs of both the Pages Directory and the App Router.

Conclusion

In summary, you now have a good understanding of Next.js's App Router and its features.

You have learned how to structure routes using both the Pages Directory and the App Router, as well as advanced features such as layout components, server components, and data fetching.

By exploring these topics, you have not only gained insights into the capabilities of these tools. You've also learned how to choose between the new approach (App Router) and the old approach of using the Pages Directory.

With this knowledge, you are well-prepared to make informed decisions and create exceptional web experiences in the ever-changing landscape of web development.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter, sorry (X) 😂: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

If you’re just at the beginning of your journey in PHP development, chances are that you use complete file names in the URL to navigate your application, like server/contact.php. No worries, we all started that way, and it’s how we learn.

Today, I want to help you improve how you navigate files in your application. We’ll be talking about routing, as it’s crucial in any modern application. It'll help you take a step forward in your professional PHP development.

A routing system simply maps an HTTP request to a request handler (function or method). In other words, it defines how we navigate or access different parts of an app without the need to type the file name. You can do this by creating or setting routes (or paths). For example, the route server/contact lets us access the contact.php file.

Prerequisites

To get the most out of this tutorial, you'll need the following:

• A basic understanding of PHP.
• A basic understanding of HTTP and networking.
• An Apache or NGINX server, and a basic understanding of how to configure those.

And with that, let's jump in.

How Routing Works

First thing first, let me recall you what a routing is. Routing allows us to structure our app in a better way and get rid of messy URLs. These are two main features offered by any good routing system:

• Defines which action to run for each incoming request.
• Generates SEO-friendly URLs (e.g. /views/users instead of views/user.php?all).

To do a routing system, we need a router, which is no more than the entry file to our app. By default, this entry file is named as index.php. Inside the file, we define the routing system thanks to [switch](https://www.php.net/manual/en/control-structures.switch.php) or [match](https://www.php.net/manual/en/control-structures.match.php) statements.

Last but not least, we must redirect all requests to the router. This is done in the configuration file of the PHP server.

Project Setup

Before moving forward, let’s see what the project will look like:

File structure

Use the shell commands below to initiate the project:

mkdir php-routing & cd php-routing
touch index.php .htaccess

• .htaccess: A directory-level Apache configuration file. You don’t need it if you use an NGINX server.
• index.php: This is the router and entry file of the project. All incoming requests will be redirected here.
• views: This folder holds all the UIs for the project.

How to Redirect All HTTP Requests to the Router

We've said earlier that the redirection is done in the PHP server config file. So you'll need to make some tweaks depending on whether you use an Apache or NGINX server.

Redirect Using Apache

Here, we can easily use the .htaccess file that we have already created in the root of the project. Add the directives below:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)＄ index.php

• line 1: We activate the Apache server’s runtime rewriting engine.
• line 2: We limit access to physical files.
• line 3: We redirect all the upcoming requests to the index.php.

Note: If the site or app is note at the root of the server (or if we don’t have a virtual host), here's what the .htaccess should look like:

RewriteEngine On
RewriteBase /folder/
RewriteRule ^index\\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /folder/index.php [L]

In the code above, replace /folder/ with the name of the folder containing your site.

Redirect Using NGINX

The default configuration file is name nginx.conf. This file can be found in etc/nginx, usr/local/nginx/conf, or /usr/local/etc/nginx.

To redirect to index.php use the command below:

location / {
        try_files $uri $uri/ /index.php
}

The location / block specifies that this is a match for all locations unless explicitly specified location /<name>.

The try_files directive tells the server that for any request to the URI that matches the block in the location, try the $uri (or $uri/) first, and if the file is present, serve the file. Otherwise, the fallback option (index.php) is used. And this last behavior is what we want.

Reload the server after the modification.

How to Create the Routing System

We now know how routing works, and we are even sending all requests to the router. Now is the time to write the code for the router in index.php.

First, create a variable to hold the HTTP request string:

$request = $_SERVER['REQUEST_URI'];

This variable will help us to compare with many routes (paths) and call the appropriate view interface.

switch ($request) {
     case '/views/users':
        require __DIR__ . '/views/users.php';

     case '/views/department':
        require __DIR__ . '/views/dep.php';
}

What's happening here? The switch statement is similar to a series of if statements on the same expression (variable). It executes a code only when a case statement is found whose expression evaluates to a value that matches the value of the switch expression. Let me illustrate this so that you can get it well.

Let's consider that our variable holds the value /views/users/. When the piece of the code above will be run, PHP will check if the value /views/users equals to the value of case statement, which in our case is /views/users. So, this condition will evaluate to true, PHP will call the file /views/users.php. If the condition evaluates to false, PHP will check for the next case statement until the end of the switch block.

Note: Every time the case statement evaluates to true PHP will continue to execute the code in the following case statements without necessary evaluating those case statements. In our case, PHP also requires views/dep.php. To avoid this "bad behavior", you must add break statement after each case statement.

Let now put everything together into our index.php file:

<?php

$request = $_SERVER['REQUEST_URI'];
$viewDir = '/views/';

switch ($request) {
    case '':
    case '/':
        require __DIR__ . $viewDir . 'home.php';
        break;

    case '/views/users':
        require __DIR__ . $viewDir . 'users.php';
        break;

    case '/contact':
        require __DIR__ . $viewDir . 'contact.php';
        break;

    default:
        http_response_code(404);
        require __DIR__ . $viewDir . '404.php';
}

As you already know, we start off by storing a user request in the $request variable, then we use it in the switch statement. For the sake of clean code, I have created a variable to hold the view directory name.

You'll also notice two other things:

• Both '' and '/' are used to match site.com as well as site.com/ for when users are in the root of the app or website.
• There's a special case statement, default, to match anything that wasn't matched by the other cases, i.e. when the route is unknown.

Let's now add some dummy data in our views.

Add Dummy Data in the Views Files

We have already created all files in the views directory. Let's just move to this directory and add some content in each file.

Just put some content in each file:

<h1>Home</h1>
<p>Welcome in my app.</p>

<h1>Users</h1>
<p>List of our users.</p>

<h1>Conct us</h1>
<p>Getting in touch is easy. Just email us</p>

<h1>404</h1>
<p>You've reached the end of Internet.</p>

As you can see, each file just contains a title and a paragraph. Feel free to add whatever content you like and test the router.

Final thoughts

In this tutorial, you learned how to create a basic routing system from scratch, including:

• How to create a file named index.php at the root of the project. This is the router for your app.
• How to redirect all incoming requests to the router. You do this in the configuration file of your server.
• How to create the routing system with a switch statement in the router.

Happy coding!

🔐 Here's what we'll cover:

• You'll get to know getStaticPaths(), one of the core principles of Next.js.
• You'll improve your general Next.js knowledge and confidence.
• You'll have access to a quick-replicable example for your own Next.js learning purposes.

📝 Prerequisites

• You should be familiar with what Next.js is and why you should consider using it.
• You should have some understanding of what Routing and Dynamic Routing mean in React and/or Next.js.
• For this example, I work with TypeScript. But it's not necessary for you to be familiar with TypeScript. I will address the code which would be omitted when using JavaScript. Also, whenever you see .tsx regarding any files, you can just replace that with .js if you are using JavaScript.

🎯 The Objective

This quick guide aims to help you manage fetching data, which can be used for pre-rendering purposes within dynamic routes in Next.js. We'll discuss some theory as well as a practical example.

While we are focusing on the actual logic of the required code, I won't do any CSS styling whatsoever. Feel free to get creative on the frontend for your own project when you're using the techniques we discuss in this tutorial.

🔎 How Routing Works in Next.js

While React itself uses a code-based approach for any routing intentions, Next.js utilizes a file-system for the concept of routing.

Therefore, you are probably familiar with code-based routing in React, which may look similar to this:

Example for code-based React Routing

With this code-based approach, you are, for example, able to navigate from the main route at / to the about page through /about.

You are also able to find a dynamic routing approach in this React example with the :productId path.

With Next.js, though, we don't use such code-based routing anymore. Instead, this React framework makes use of file-based routing. This means that you set up your routes directly through page files.

Consider the following pages folder containing subfolders and files:

Example for file-based Next.js Routing

The index.tsx file would be the equivalent to the / path in the React Routing example from above. So you would be able to reach the content within the user-profile.tsx file through /user-profile – that's it!

On the other hand, if you want to reach out to some nested content, you can use /stars/[id] in order to find the content in the corresponding page file.

Maybe you noticed that I'm using square brackets for [id].tsx as well as for [something].tsx. That's needed in order to set up dynamic routing in Next.js.

You could technically insert any input you would like for [id] and the page would load for this specific path.

Just keep in mind that if this dynamic route requires a valid input for [id] (maybe some sort of existing product id for which we want to fetch the respective data), then there could be an error.

✂️ Data Fetching in Next.js with Dynamic Routing

Imagine you apply this dynamic routing approach to a shop page where you list a bunch of different items. Each item would have a link for more information about that specific item.

Within this Link element, you would be able to lead the user to a dynamic route with a valid parameter (the corresponding product id, for example). For such cases, dynamic routing is the best approach.

❗How does getStaticProps() work?

With this function, you can pre-render a page at build time. This is useful for Search Engine Optimization (SEO) purposes, for example, and can overall generate a better user experience.

The data which should be pre-rendered can typically be found on some database, for example. Like with getStaticProps(), you are able to directly write any server-side code within this function for data fetching purposes (instead of reaching out to an API route on the backend, which then goes through any required server-side actions).

There is more to say about getStaticProps(). If you are pretty new to all this stuff, I highly recommend checking out the official Next.js documentation on this topic.

❓ What's the purpose of getStaticPaths()?

While getStaticProps() on its own seems to already do all the work we need to be done for our pages, we will encounter an error when we use this function alone on dynamic routing pages. The error message will actually call you out on this specific fact that getStaticPaths() is missing.

Screenshot of server error. SSG stands for Static-Site Generation

getStaticProps() utilizes the static-site generation concept. So Next.js will pre-render the respective page at build time. In the case of dynamic routes, however, Next.js doesn't know by itself which paths to pre-render. Instead, you have to step in and help – and this is where getStaticPaths() comes in handy.

So with getStaticPaths you can specify which paths of the dynamic routing should be pre-rendered and/or how unknown paths should be handled.

📋 Quick side note

If you are using getServerSideProps(), which can be used for similar reasons as getStaticProps(), you will notice that getStaticPaths() is actually not needed. Why is that?

getServerSideProps() doesn't use the static generation principle. Instead of building the page, Next.js pre-renders the page on each request with the returned data. This is called server-side rendering.

We don't have to tell Next.js which paths have to be statically pre-rendered while using getServerSideProps(), since there is no such thing for this function in the first place.

If you want to read more about this function, I can again recommend the official Next.js documentation for server-side rendering. However, this is out of the scope of this quick guide and I won't need getServerSideProps() for any of the following steps.

🔧 How to Setup Our Project

For this example, we will reproduce a small dynamic routing case. For this, I prepared a subfolder test in the pages folder. The pages folder gets automatically created by Next.js.

In the test folder, I insert the [something].tsx file ([something].js if you are using JavaScript and not TypeScript).

There is also a backendData folder at the root level of our Next.js application with the some-backend-data.json file (thus not in the pages folder). This file will provide us with the data which we will insert dynamically.

🔨 Setup for the backend JSON data

For this example, I'm creating some dummy data which will be embedded in the some-backend-data.json within the backendData folder. This way, we can reproduce a situation where you have access to some sort of data in the backend that you want to use on the frontend.

Here's what the some-backend-data.json file looks like:

{
    "stars": [
        { 
            "id": "St2-18", 
            "name": "Stephenson 2-18", 
            "description": "Stephenson 2-18 is a red supergiant (RSG) or possible extreme red hypergiant (RHG) star in the constellation of Scutum.", 
            "link": "https://en.wikipedia.org/wiki/Stephenson_2-18" 
        },
        { 
            "id": "UY-SC", 
            "name": "UY Scuti", 
            "description": "UY Scuti is an extreme red hypergiant or red supergiant star in the constellation Scutum.", 
            "link": "https://en.wikipedia.org/wiki/UY_Scuti"
        },
        { 
            "id": "RSGC1", 
            "name": "RSGC1-F01", 
            "description": "RSGC1-F01 is a red supergiant located in the RSGC1 open cluster in the constellation of Scutum.", 
            "link": "https://en.wikipedia.org/wiki/RSGC1-F01"
        }
    ]
}

In this file you will find some JSON formatted data. There is "stars" which is just an array with three objects. All three objects have the same format and include an id, a name, a description, and a link to an external web page.

As you may have figured out by now, these are actually some real stars in our universe.

In a real-world situation, you would probably have some sort of connection to a databank, but the actual data you are receiving from this databank could technically be formatted as in this example. So this is sufficient for our example setup.

🔑 Imports and interface

As a next step, we can dive into actually creating the Next.js [something].tsx dynamic route. Let's start with the required imports for this example:

import { GetStaticProps, GetStaticPaths  } from 'next';
import { useRouter } from 'next/router';
import path from 'path';
import fs from 'fs/promises';

interface starInterface {
    id: string
    name: string
    description: string
    link: string
}

Keep in mind that I'm using TypeScript here. If you are using JavaScript, that's of course fine as well. Just remember that you don't need the interface starInterface or import { GetStaticProps, GetStaticPaths } from 'next'.

💎 How to Create the Data Fetching Function

For the next step, I will prepare an async function called getData(), which will be helpful for the getStaticProps() and getStaticPaths() functions. This will look quite confusing, especially if you have never had contact with backend JavaScript code like you would expect in any Node.js application, for example.

Just bear with me for a few more seconds. You don't have to understand the following code in detail. We just need to know what the result of the getData() function is.

async function getData() {
    const filePath = path.join(process.cwd(), 'backendData', 'some-backend-data.json');
    const fileData = await fs.readFile(filePath);
    const data = JSON.parse(jsonData.toString());

    return data;
  }

As you can see, there are three variables: filePath, fileData, and data. With filePath we are just focusing on the file where we have our JSON data placed. So we are targeting the current working directory (cwd), then the backendData folder, and then the JSON file.

With fileData we are trying to read this file and extract the actual JSON data that is stored in it.

We need data to convert this fileData so we can actually use it for our next steps.

All in all, getData() basically just provides us with the data from the some-backend-data.json file so we can utilize it in getStaticProps() as well as in getStaticPaths(). There is not much more to it.

🔨 Setup for getStaticProps()

After we implement getData() (which will come in handy when we try to fetch our dummy backend data), we'll now create the getStaticProps() function next.

Here, we'll use getStaticProps() to enable pre-rendering for the specific fetched data for the paths in our dynamic route.

Before we jump right into the code example below, have a quick thought about what we actually want to accomplish.

The user should be directed to this specific dynamic route, which is indicated by a unique identifier in the URL. By that, I mean that we want /test/St2-18 and test/UY-SC to lead to the same dynamic page.

The data that the user will see there should, however, differ from each other since we want to fetch data for St2-18 and UY-SC, respectively.

We have a getData() function which helps reach out to our backend data. But we still have to know which exact data we want to extract from our dummy backend.

For this step, we can pull the specific identifier from the URL, St2-18 for example, and combine this with our extracted getData() result data.

From there we can search for the specific object containing the data we want to display within our backend's getData() result.

Now, let's head back to our code example to see this process in action.

See the following code section where we implement getStaticProps():

export const getStaticProps: GetStaticProps = async (context) => {
    const itemID = context.params?.something;
    const data = await getData();
    const foundItem = data.stars.find((item: starInterface) => itemID === item.id);

    if (!foundItem) {
      return {
        props: { hasError: true },
      }
  }

  return {
    props: {
      specificStarData: foundItem
    }
  }
}

For JavaScript, you can just omit GetStaticProps as the type for getStaticProps().

getStaticProps() can provide us with a context parameter through which we can reach some helpful methods. For now, it's just important to understand that through context we are able to access params and then afterwards reach out to the current identifier of our specific path for which something is the placerholder.

Remember that this file is actually called [something].tsx, which is why we access something in this context.

With this approach, we successfully extract the information we need from our URL to search for the specific object in our backend data array. Then we save this information in the itemID variable.

Let's say the user reaches out to /test/St2-18, then itemID would hold the value of St2-18.

Since we have our handy getData() function, we can just get our backend data through this function and save it to data.

Since we now have itemID as well as data, we can combine both variables and create foundItem. This returns the object that includes the itemID as an id.

With the if statement, we are checking if foundItem actually exists. Or in other words, we check if our backend data contains data with the corresponding id we extracted through our itemID.

If no data can be found, we return this boolean hasError with the value true. This helps us manage such cases on the frontend.

If there is data, then we return our foundItem to the frontend. Keep in mind that everything you return in this props object will actually be exposed to the frontend. So don't return any credentials (personal API keys, for example).

🔨 Setup for getStaticPaths()

Before we head to the frontend part of our dynamic page, we still need to implement the getStaticPaths() function:

  export const getStaticPaths: GetStaticPaths = async () => {
    const data = await getData();
    const pathsWithParams = data.stars.map((star: starInterface) => ({ params: { something: star.id }}))

    return {
        paths: pathsWithParams,
        fallback: true
    }
  }

For JavaScript, you can just omit GetStaticPaths as the type for getStaticPaths(). You can also delete starInterface for JavaScript.

Within the getStaticPaths() function, we want to tell Next.js which paths should be pre-rendered.

For this step, we are accessing our backend data with getData(), as you saw in getStaticProps().

getStaticPaths() demands a specific form for the paths within the return. You actually have two options:

• The first one is the approach I am using in this example: paths: [{ params: { something: star.id } }]. It should be an array with an object for every path you want Next.js to pre-render.
• The second option is to use path strings like this: paths: ['/test/St2-18', '...', '...'].

Both techniques achieve the same behavior, so just pick the one you prefer.

What is the fallback property?

It's important to understand is that you don't need to include every path which should be pre-rendered. This is especially helpful when you have a lot of cases to consider and don't want everything to be pre-rendered.

To handle such cases, the fallback property is particularly useful

You can read more about the fallback in detail in the official Next.js documentation.

In my own words, I would explain it like this:

• fallback set to false would automatically lead to a 404 error page whenever the user tried to access a path which wasn't recognized by getStaticPaths() through the paths property.
• fallback set to true doesn't automatically lead to a 404 error page whenever the user tries to access a path that doesn't exist in getStaticPaths(). This way, we still reach out to the frontend and are able to handle the situation there by displaying some sort of loading sequence, for example. You can also display an error on the frontend if there wasn't any data to be fetched when there was no valid item data for the specific path parameter.
• fallback set to 'blocking' doesn't automatically lead to a 404 error page whenever the user tries to access a path that doesn't exist in getStaticPaths(). It's similar to fallback set to true but now we basically omit any manual loading processes. Instead, the browser just takes a moment longer to fetch the data and then displays the page ready to go. This is helpful when you don't want to present a "Loading..." to the user, for example, and instead just let them wait a little longer before the page is loaded successfully. If no data could be found, then we still have the opportunity to create a manual error on the frontend.

Since we have such a small dataset, we are just giving every possible path to getStaticPaths(). So we technically don't need too much attention to the fallback property.

Still, I am setting fallback to true to show you how you can handle such manual errors as well as loading sequences that might occur.

📐 How to Configure the Frontend

In the last step, we'll configure our actual page. Anything in here will be the frontend content that the user will see:

function projectPage(props: { specificStarData: starInterface, 
hasError: boolean }) {
  const router = useRouter();

  if (props.hasError) {
    return <h1>Error - please try another parameter</h1>
  }

  if (router.isFallback) {
      return <h1>Loading...</h1>
  }

  return (
    <div>
      <h1>{props.specificStarData.name}</h1>
      <p>{props.specificStarData.description}</p>
      <a href={props.specificStarData.link}>More Information here (link)</a>
    </div>
  )
}

export default projectPage;

For JavaScript, you don't have to mention the starInterface as well as boolean within the function's arguments.

In the code above you can find our specificStarData as well as hasError, which both hold some values. Besides that, we utilize the useRouter() hook in order to have access to isFallback, which helps us handle any fallback cases.

Remember that the fallback from getStaticPaths() can be set to true or 'blocking' if you are not able to provide every dynamic route for pre-loading. In these cases, it would prevent your page from crashing.

Instead, it will load for some time on the fly as the user accesses this specific dynamic route and then provides the respective information.

For this potential loading sequence, we use router.isFallback in order to return JSX with some sort of loading indication for the user.

If there actually is an error because the user tried to access a dynamic path for which no data can be found, hasError steps in, indicating that there is an actual error.

Assuming that the user actually reached a dynamic path for which data could be fetched, the actual intended JSX output will be returned.

Following all the configuration steps (with fallback: true), we receive this output for the /test/St2-18 path:

Result for /test/St2-18

If we try to put in an invalid parameter, it first tries to load and then returns our manual set up error message:

Result for /test/this-will-produce-an-error

🎲 How to Test the fallback Property

And that's pretty much it! The result is a dynamic route which uses getStaticProps() as well as getStaticPaths() in order to pre-render the fetched data from our dummy backend.

When you are working with getStaticPaths() for the first time, I recommend trying out the different fallback values (true, false, 'blocking') to find out how exactly your application's behavior changes.

Since we are using fallback: true in our example, we are also able to just insert one possible path out of the three without having our application crash.

So let's say we change the paths property within getStaticPaths() to paths: ['/test/St2-18']. While we inserted all the paths before, we now just use one path with the string method I mentioned earlier instead of the { params: { something: star.id }} format.

With this configuration, you can still access /test/UY-SC, for example, but you'll notice that the Loading... message appears for a brief moment because we prepared this case in our if-statement with router.isFallback. After the data is loaded, it will successfully show up on the screen.

When using fallback: 'blocking' and paths: ['/test/St2-18'], you'll notice that you can't see any Loading.... Instead, the browser just takes a moment longer to load the data before changing the browser's content.

It's up to you which way you prefer.

✅ Conclusion

While this example shows the fundamental parts of getStaticProps() as well getStaticPaths(), there is still more to read about these Next.js functions.

Still, all you've read here is enough to get started working with getStaticProps() and getStaticPaths() on your own in a lot of cases.

📃 Resources & learning material

• Official Next.js documentation for Data Fetching.
• For learning more about Next.js on the whole, I can strongly recommend checking out the udemy course by Maximilian Schwarzmüller for Next.js. This course helped me a lot, at least.

Next.js is a React framework that ships with all the features you need for production. It enables routing in your app by using the file-system-based routing.

In this guide, I will show you how routing works in Next.js.

• How Routing works in Next.js
• Linking between pages
• Passing route parameters
• Dynamic routes
• Dynamic nested routes

How Routing works in Next.js

Next.js uses the file system to enable routing in the app. Next automatically treats every file with the extensions .js, .jsx, .ts, or .tsx under the pages directory as a route.

A page in Next.js is a React component that has a route based on its file name.

Consider this folder structure as an example:

├── pages
|  ├── index.js
|  ├── contact.js
|  └── my-folder
|     ├── about.js
|     └── index.js

Here, we have four pages:

• index.js is the home page accessible on http://localhost:3000
• contact.js is the contact page accessible on http://localhost:3000/contact
• my-folder/index.js is the page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder
• my-folder/about.js is the about page located on the sub-folder my-folder accessible on http://localhost:3000/my-folder/about

How to link between pages

By default, Next.js pre-renders every page to make your app fast and user-friendly. It uses the Link component provided by next/link to enable transitions between routes.

import Link from "next/link"

export default function IndexPage() {
  return (
    <div>
      <Link href="/contact">
        <a>My second page</a>
      </Link>
      <Link href="/my-folder/about">
        <a>My third page</a>
      </Link>
    </div>
  )
}

Here, we have two routes:

• The first link leads to the page http://localhost:3000/contact
• The second link leads to the page http://localhost:3000/my-folder/about

The Link component can receive several properties, but only the href attribute is required. Here, we use a <a></a> tag as a child component to link pages. But alternatively you can use any element that supports the onClick event on the Link component.

How to pass route parameters

Next.js allows you to pass route parameters and then get back the data using the useRouter hook or getInitialProps. It gives you access to the router object that contains the params.

• index.js

import Link from "next/link"

export default function IndexPage() {
  return (
    <Link
      href={{
        pathname: "/about",
        query: { id: "test" },
      }}
    >
      <a>About page</a>
    </Link>
  )
}

As you can see here, instead of providing a string to the href attribute, we pass in an object that contains a pathname property. This is the route, along with a query element that holds the data.

• about.js

import { useRouter } from "next/router"

export default function AboutPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>About us: {id}</div>
}

Here, we import the useRouter hook to get the data passed in. Next, we pull it from the query object using destructuring.

If you are using server-side rendering, you have to use getInitialProps to get the data.

export default function AboutPage({ id }) {
  return <div>About us: {id}</div>
}

AboutPage.getInitialProps = ({ query: { id } }) => {
  return { id }
}

Dynamic routes

Next.js enables you to define dynamic routes in your app using the brackets ([param]). Instead of setting a static name on your pages, you can use a dynamic one.

Let's use this folder structure as an example:

├── pages
|  ├── index.js
|  ├── [slug].js
|  └── my-folder
|     ├── [id].js
|     └── index.js

Next.js will get the route parameters passed in and then use it as a name for the route.

• index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[slug]" as="/my-slug">
          <a>First Route</a>
        </Link>
      </li>
      <li>
        <Link href="/my-folder/[id]" as="/my-folder/my-id">
          <a>Second Route</a>
        </Link>
      </li>
    </ul>
  )
}

Here, we have to define the value on the as attribute because the path is dynamic. The name of the route will be whatever you set on the as prop.

• [slug].js

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>The dynamic route is {id}</div>
}

You can get the route parameters as well with the useRouter hook on the client or getInitialProps on the server.

• my-folder/[id].js

export default function MyDynamicPage({ example }) {
  return <div>My example is {example}</div>
}

MyDynamicPage.getInitialProps = ({ query: { example } }) => {
  return { example }
}

Here, we use getInitialProps to get the dynamic route passed in.

Dynamic nested routes

With Next.js, you can also nest dynamic routes with the brackets ([param]).

Let's consider this file structure:

├── pages
|  ├── index.js
|  └── [dynamic]
|     └── [id].js

• index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[dynamic]/[id]" as="/my-folder/my-id">
          <a>Dynamic nested Route</a>
        </Link>
      </li>
    </ul>
  )
}

As you can see here, we set the dynamic values on the as attribute as we did in the previous example. But this time, we have to define the name of the folder and its file.

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { dynamic, id },
  } = router
  return (
    <div>
      Data: {dynamic} - {id}
    </div>
  )
}

Here, we pull out the route parameters from the query object with the useRouter hook.

That's it! Thanks for reading.

If you're interested in learning Next.js in a comprehensive way, I highly recommend this bestseller course.

You can find other great content like this on my blog or follow me on Twitter to get notified.

Photo by Javier Allegue Barros on Unsplash

The goal of this story is to briefly explain how routing works in Express while building a simple — very simple — Node app.

We’ll also use EJS, a template engine that “lets you generate HTML markup with plain JavaScript,” according to their website. Basically, it’ll let us create HTML pages that can vary depending on the request the client makes. We won’t be using this last feature, but it’s a great one. At the end of this article, you’ll find some resources where you can learn more.

What is routing? (In 2-ish lines)

First of all, let’s take a quick (really quick) glance at what routing is:

somewebsite.com/someroute

It’s basically taking the user (or some data) from one place to another. That place is the route. I told you I was going to make it quick.

Creating the project

We’re going to build a fancy website to learn how routing works in Express. Check it out:

Cool, right? But it’s everything we need for the moment.

First, let’s create the project and install the packages. Just run the following in the command line:

npm install express

npm install ejs

You can additionally add the dash dash save (I write — as “dash” because Medium automatically formats it, and it doesn’t look well for this purpose) to save it in your package.json file. But how this works is a story for another day.

Then we will require Express and set the view engine to EJS in our app.js file as follows:

var express = require('express');var app = express();app.set('view engine', 'ejs');

We’ll also include the following line so our app listens for requests:

app.listen(3000);

Handling GET requests

Congratulations, everything is ready to handle requests! There are several types of requests in HTTP, but we’ll only be handling GET requests, which are used to retrieve data from the server. To handle this kind of request in Express, we use the following method:

app.get('/about', function(req, res) {  res.render('about');});

Let’s take a look at what’s happening here. We’re telling our server that, whenever someone types in somewebsite.com/about, we want to fire a function. That function takes two parameters, req (request) and res (response). Using the response object, we render the about page.

For this to work, we’ll have to create a page named about.ejs in HTML. We’ll also place it in a folder called views inside our project folder. This is the folder where Express will look to render the view. Here you have the mega-complex about page we’ll be using for this example:

Nice! But, what if the user doesn’t type in any route? Just like we do most of the times, somewebsite.com? Well, really easy. Change /about to just /, and render whatever page you like:

app.get('/', function(req, res) {  res.render('home');});

Handling non-existing routes

But what if someone types in a route that doesn’t exist? We probably don’t want a default error page to show up. Instead, we want a custom, cool error page.

Well, the good news is that it’s extremely easy to make one with Express. Just replace the route parameter in the get method with an asterisk and render your own error page like so:

app.get('*', function(req, res) {  res.render('error');});

Trying it out!

Finally, let’s run our server from the command line (assuming the server is named app.js)

node app

and see if it works! Let’s type in the name of our server (localhost, as it’s a local server running on our computer) and the port (3000 in this case) in our browser:

localhost:3000

localhost:3000 or localhost:3000/

localhost:3000/about

localhost:3000/anythingthatwehaventsetaroutefor

Amazing!

Further reading

You can learn everything you need to know about routing in the Express guide, and there’s a lot of handy things in the EJS website as well!

I hope this article was helpful for you. If it was, please leave a comment and clap it up!

Happy coding… Or happy routing, I guess!