Routing

When I first built the POS frontend, everything was on one page. The product list, cart, checkout form, and order history were all rendered conditionally based on state: {view === 'products' && <ProductList />}, {view === 'cart' && <Cart />}. It worked for a demo, but users couldn't bookmark pages, the back button didn't work, and the URL was always just /. It felt broken.

Then I added React Router. Suddenly, /products showed products, /cart showed the cart, /orders/123 showed a specific order. Users could share links, use browser navigation, and the app felt like a real website. Routing transforms a single-page app into a multi-page experience.

What Is React Router?

React Router is the standard library for routing in React. It:

Maps URLs to components (/products → <ProductList />)
Handles browser navigation (back/forward buttons)
Enables programmatic navigation (navigate('/cart'))
Supports URL parameters (/products/:id)
Provides protected routes (require authentication)

In the POS system, the routes are:

/ - Home/Dashboard
/products - Product catalog
/products/:id - Product details
/cart - Shopping cart
/checkout - Checkout flow
/orders - Order history
/orders/:id - Order details
/login - Login page

Installation

npm install react-router-dom

For TypeScript:

npm install react-router-dom @types/react-router-dom

Your First Routes

Let's set up basic routing for the POS.

// App.tsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProductsPage from './pages/ProductsPage';
import CartPage from './pages/CartPage';
import CheckoutPage from './pages/CheckoutPage';
import OrdersPage from './pages/OrdersPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductsPage />} />
        <Route path="/cart" element={<CartPage />} />
        <Route path="/checkout" element={<CheckoutPage />} />
        <Route path="/orders" element={<OrdersPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

What's happening:

<BrowserRouter> wraps everything (provides routing context)
<Routes> contains all route definitions
<Route> maps a path to a component
path="*" catches unmatched routes (404 page)

Now visiting /products renders <ProductsPage />, /cart renders <CartPage />, etc.

Don't use <a> tags for internal navigation—they cause full page reloads. Use <Link> instead.

// components/Navigation.tsx
import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/products">Products</Link>
      <Link to="/cart">Cart</Link>
      <Link to="/orders">Orders</Link>
    </nav>
  );
}

export default Navigation;

<Link to="/products"> renders an <a> tag but intercepts clicks to use client-side routing—no page reload!

NavLink for Active Styling

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/products"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Products
      </NavLink>
      
      <NavLink 
        to="/cart"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Cart
      </NavLink>
    </nav>
  );
}

NavLink adds an active class to the current route's link.

Route Parameters

Dynamic routes use parameters: /products/:id matches /products/123, /products/abc, etc.

// App.tsx
<Route path="/products/:id" element={<ProductDetailsPage />} />
<Route path="/orders/:orderId" element={<OrderDetailsPage />} />

Accessing Parameters with useParams

// pages/ProductDetailsPage.tsx
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  stock: number;
  imageUrl: string;
}

function ProductDetailsPage() {
  const { id } = useParams<{ id: string }>(); // Get the :id parameter
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await fetch(`/api/products/${id}`);
        const data = await response.json();
        setProduct(data);
      } catch (error) {
        console.error('Failed to fetch product:', error);
      } finally {
        setLoading(false);
      }
    };
    
    fetchProduct();
  }, [id]); // Re-fetch if id changes
  
  if (loading) return <div>Loading...</div>;
  if (!product) return <div>Product not found</div>;
  
  return (
    <div className="product-details">
      <img src={product.imageUrl} alt={product.name} />
      <h1>{product.name}</h1>
      <p className="price">{product.price.toLocaleString()} MMK</p>
      <p>{product.description}</p>
      <p>Stock: {product.stock}</p>
      <button>Add to Cart</button>
    </div>
  );
}

export default ProductDetailsPage;

URL: /products/abc123 → id = "abc123"

Linking to Dynamic Routes

// components/ProductCard.tsx
import { Link } from 'react-router-dom';

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>{product.price} MMK</p>
      <Link to={`/products/${product.id}`}>View Details</Link>
    </div>
  );
}

Sometimes you need to navigate from code (e.g., after form submission).

// pages/CheckoutPage.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCart } from '../hooks/useCart';

function CheckoutPage() {
  const navigate = useNavigate();
  const { cart, clearCart, total } = useCart();
  const [processing, setProcessing] = useState(false);
  
  const handleCheckout = async () => {
    try {
      setProcessing(true);
      
      const response = await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: cart, total })
      });
      
      const order = await response.json();
      
      clearCart();
      
      // Navigate to order details page
      navigate(`/orders/${order.id}`);
    } catch (error) {
      console.error('Checkout failed:', error);
      alert('Checkout failed. Please try again.');
    } finally {
      setProcessing(false);
    }
  };
  
  return (
    <div className="checkout-page">
      <h1>Checkout</h1>
      
      {cart.map(item => (
        <div key={item.productId}>{item.name} x {item.quantity}</div>
      ))}
      
      <div>Total: {total.toLocaleString()} MMK</div>
      
      <button onClick={handleCheckout} disabled={processing}>
        {processing ? 'Processing...' : 'Complete Order'}
      </button>
      
      <button onClick={() => navigate('/cart')}>Back to Cart</button>
    </div>
  );
}

export default CheckoutPage;

navigate('/orders/123') - Navigate to a route

navigate(-1) - Go back (like browser back button)

navigate(-2) - Go back 2 pages

Nested Routes

For shared layouts, use nested routes.

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import ProductsPage from './pages/ProductsPage';
import ProductDetailsPage from './pages/ProductDetailsPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Routes with shared layout */}
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="products" element={<ProductsPage />} />
          <Route path="products/:id" element={<ProductDetailsPage />} />
          <Route path="cart" element={<CartPage />} />
          <Route path="orders" element={<OrdersPage />} />
        </Route>
        
        {/* Login page without layout */}
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}

// components/Layout.tsx
import React from 'react';
import { Outlet } from 'react-router-dom';
import Navigation from './Navigation';
import Header from './Header';
import Footer from './Footer';

function Layout() {
  return (
    <div className="layout">
      <Header />
      <Navigation />
      
      <main>
        <Outlet /> {/* Child routes render here */}
      </main>
      
      <Footer />
    </div>
  );
}

export default Layout;

<Outlet /> is where child routes render.

Benefits:

Shared header/nav across multiple pages
Don't repeat layout code
Clean route structure

Protected Routes (Authentication)

Some routes should only be accessible to authenticated users.

// components/ProtectedRoute.tsx
import React, { ReactNode } from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';

interface ProtectedRouteProps {
  children: ReactNode;
  requiredRole?: 'admin' | 'cashier' | 'manager';
}

function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
  const { isAuthenticated, user, loading } = useAuth();
  
  if (loading) {
    return <div>Loading...</div>;
  }
  
  if (!isAuthenticated) {
    // Redirect to login with return URL
    return <Navigate to="/login" replace />;
  }
  
  if (requiredRole && user?.role !== requiredRole) {
    // User logged in but doesn't have required role
    return <div>Access Denied</div>;
  }
  
  return <>{children}</>;
}

export default ProtectedRoute;

Using Protected Routes

// App.tsx
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        
        {/* Public routes */}
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="products" element={<ProductsPage />} />
          <Route path="products/:id" element={<ProductDetailsPage />} />
        </Route>
        
        {/* Protected routes - require authentication */}
        <Route path="/" element={<Layout />}>
          <Route 
            path="cart" 
            element={
              <ProtectedRoute>
                <CartPage />
              </ProtectedRoute>
            } 
          />
          
          <Route 
            path="checkout" 
            element={
              <ProtectedRoute>
                <CheckoutPage />
              </ProtectedRoute>
            } 
          />
          
          <Route 
            path="orders" 
            element={
              <ProtectedRoute>
                <OrdersPage />
              </ProtectedRoute>
            } 
          />
          
          {/* Admin-only route */}
          <Route 
            path="admin" 
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminPage />
              </ProtectedRoute>
            } 
          />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Now:

Unauthenticated users → redirected to /login
Regular users can access cart/checkout/orders
Only admins can access /admin

Complete POS Routing Setup

Here's the production routing structure for the POS system:

// App.tsx
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import { CartProvider } from './contexts/CartProvider';
import ProtectedRoute from './components/ProtectedRoute';
import Layout from './components/Layout';

// Pages
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import ProductsPage from './pages/ProductsPage';
import ProductDetailsPage from './pages/ProductDetailsPage';
import CartPage from './pages/CartPage';
import CheckoutPage from './pages/CheckoutPage';
import OrdersPage from './pages/OrdersPage';
import OrderDetailsPage from './pages/OrderDetailsPage';
import AdminPage from './pages/AdminPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <AuthProvider>
      <CartProvider>
        <BrowserRouter>
          <Routes>
            {/* Public routes */}
            <Route path="/login" element={<LoginPage />} />
            
            {/* Main app with layout */}
            <Route path="/" element={<Layout />}>
              {/* Home redirects to products */}
              <Route index element={<Navigate to="/products" replace />} />
              
              {/* Public product browsing */}
              <Route path="products">
                <Route index element={<ProductsPage />} />
                <Route path=":id" element={<ProductDetailsPage />} />
              </Route>
              
              {/* Protected routes */}
              <Route 
                path="cart" 
                element={
                  <ProtectedRoute>
                    <CartPage />
                  </ProtectedRoute>
                } 
              />
              
              <Route 
                path="checkout" 
                element={
                  <ProtectedRoute>
                    <CheckoutPage />
                  </ProtectedRoute>
                } 
              />
              
              <Route 
                path="orders" 
                element={
                  <ProtectedRoute>
                    <OrdersPage />
                  </ProtectedRoute>
                }
              >
                {/* Nested route for order details */}
                <Route path=":orderId" element={<OrderDetailsPage />} />
              </Route>
              
              {/* Admin only */}
              <Route 
                path="admin/*" 
                element={
                  <ProtectedRoute requiredRole="admin">
                    <AdminPage />
                  </ProtectedRoute>
                } 
              />
            </Route>
            
            {/* 404 */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </BrowserRouter>
      </CartProvider>
    </AuthProvider>
  );
}

export default App;

// components/Navigation.tsx
import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import { useCart } from '../hooks/useCart';

function Navigation() {
  const { isAuthenticated, user, logout } = useAuth();
  const { itemCount } = useCart();
  
  return (
    <nav className="navigation">
      <div className="nav-links">
        <NavLink 
          to="/products"
          className={({ isActive }) => isActive ? 'active' : ''}
        >
          Products
        </NavLink>
        
        {isAuthenticated && (
          <>
            <NavLink to="/cart">
              Cart {itemCount > 0 && <span className="badge">{itemCount}</span>}
            </NavLink>
            
            <NavLink to="/orders">
              Orders
            </NavLink>
            
            {user?.role === 'admin' && (
              <NavLink to="/admin">
                Admin
              </NavLink>
            )}
          </>
        )}
      </div>
      
      <div className="nav-actions">
        {isAuthenticated ? (
          <>
            <span>Welcome, {user?.name}</span>
            <button onClick={logout}>Logout</button>
          </>
        ) : (
          <NavLink to="/login">Login</NavLink>
        )}
      </div>
    </nav>
  );
}

export default Navigation;

Query Parameters

For filters and search, use query parameters.

// pages/ProductsPage.tsx
import { useSearchParams } from 'react-router-dom';

function ProductsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const category = searchParams.get('category') || 'all';
  const search = searchParams.get('search') || '';
  
  const { products } = useProducts({ category, search });
  
  const handleCategoryChange = (newCategory: string) => {
    setSearchParams({ 
      category: newCategory,
      search // Preserve search
    });
  };
  
  const handleSearchChange = (newSearch: string) => {
    setSearchParams({
      category, // Preserve category
      search: newSearch
    });
  };
  
  return (
    <div>
      <input 
        value={search}
        onChange={(e) => handleSearchChange(e.target.value)}
        placeholder="Search..."
      />
      
      <select value={category} onChange={(e) => handleCategoryChange(e.target.value)}>
        <option value="all">All Categories</option>
        <option value="food">Food</option>
        <option value="drinks">Drinks</option>
      </select>
      
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

URL examples:

/products - All products
/products?category=food - Food category
/products?search=chicken&category=food - Search + filter

Benefits:

Shareable URLs
Browser back/forward works
Bookmarkable filtered views

// pages/LoginPage.tsx
import { useNavigate, useLocation } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { login } = useAuth();
  
  const handleLogin = async (email: string, password: string) => {
    await login(email, password);
    
    // Redirect to page user was trying to access, or home
    const from = location.state?.from?.pathname || '/';
    navigate(from, { replace: true });
  };
  
  return (/* login form */);
}

Updated ProtectedRoute

function ProtectedRoute({ children }: { children: ReactNode }) {
  const { isAuthenticated, loading } = useAuth();
  const location = useLocation();
  
  if (loading) return <div>Loading...</div>;
  
  if (!isAuthenticated) {
    // Save attempted location for redirect after login
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return <>{children}</>;
}

Flow:

User tries to access /orders (protected)
Not authenticated → redirect to /login with state
User logs in
Redirect back to /orders

Real POS Example: Complete Order Flow

// pages/OrdersPage.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { useOrders } from '../hooks/useOrders';

function OrdersPage() {
  const { orders, loading } = useOrders();
  
  if (loading) return <div>Loading orders...</div>;
  
  if (orders.length === 0) {
    return (
      <div className="empty-state">
        <p>No orders yet</p>
        <Link to="/products">Start Shopping</Link>
      </div>
    );
  }
  
  return (
    <div className="orders-page">
      <h1>Your Orders</h1>
      
      <div className="orders-list">
        {orders.map(order => (
          <Link 
            key={order.id} 
            to={`/orders/${order.id}`}
            className="order-card"
          >
            <div className="order-header">
              <span className="order-id">#{order.id}</span>
              <span className="order-date">
                {new Date(order.createdAt).toLocaleDateString()}
              </span>
            </div>
            
            <div className="order-items">
              {order.items.length} items
            </div>
            
            <div className="order-total">
              {order.total.toLocaleString()} MMK
            </div>
            
            <div className={`order-status ${order.status}`}>
              {order.status}
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default OrdersPage;

// pages/OrderDetailsPage.tsx
import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useOrder } from '../hooks/useOrder';

function OrderDetailsPage() {
  const { orderId } = useParams<{ orderId: string }>();
  const navigate = useNavigate();
  const { order, loading, error } = useOrder(orderId!);
  
  if (loading) return <div>Loading order...</div>;
  
  if (error || !order) {
    return (
      <div className="error-state">
        <p>Order not found</p>
        <button onClick={() => navigate('/orders')}>Back to Orders</button>
      </div>
    );
  }
  
  return (
    <div className="order-details">
      <button onClick={() => navigate('/orders')}>← Back to Orders</button>
      
      <h1>Order #{order.id}</h1>
      
      <div className="order-info">
        <p>Date: {new Date(order.createdAt).toLocaleString()}</p>
        <p>Status: <span className={order.status}>{order.status}</span></p>
      </div>
      
      <div className="order-items">
        <h2>Items</h2>
        {order.items.map(item => (
          <div key={item.productId} className="order-item">
            <span>{item.name}</span>
            <span>x{item.quantity}</span>
            <span>{(item.price * item.quantity).toLocaleString()} MMK</span>
          </div>
        ))}
      </div>
      
      <div className="order-total">
        <h3>Total: {order.total.toLocaleString()} MMK</h3>
      </div>
    </div>
  );
}

export default OrderDetailsPage;

Common Mistakes to Avoid

1. Using `<a>` Instead of `<Link>`

// ❌ Full page reload
<a href="/products">Products</a>

// ✅ Client-side navigation
<Link to="/products">Products</Link>

2. Forgetting BrowserRouter

// ❌ Routes won't work
function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
    </Routes>
  );
}

// ✅ Wrap with BrowserRouter
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </BrowserRouter>
  );
}

3. Not Handling 404s

// ✅ Always include a catch-all route
<Route path="*" element={<NotFoundPage />} />

4. Hardcoding URLs

// ❌ Hard to maintain
<Link to="/products/123">View Product</Link>

// ✅ Dynamic
<Link to={`/products/${product.id}`}>View Product</Link>

Key Learnings

React Router maps URLs to components
Use <Link> for navigation, not <a>
useParams accesses route parameters
useNavigate for programmatic navigation
<Outlet /> for nested routes
Protected routes require authentication
Query parameters for filters/search
Always handle 404s with catch-all route

Next Steps

You've built a complete multi-page POS system with routing. But as the app grows, you might notice performance issues—unnecessary re-renders, slow calculations, large bundle sizes. In the final article, we'll optimize the POS for production with useMemo, useCallback, React.memo, code splitting, and deployment strategies.

Continue to: Performance & Production →

PreviousCustom Hooks NextPerformance & Production

Last updated 1 month ago

Routing

What Is React Router?

Installation

Your First Routes

Navigation with Link

NavLink for Active Styling

Route Parameters

Accessing Parameters with useParams

Linking to Dynamic Routes

Programmatic Navigation

Nested Routes

Protected Routes (Authentication)

Using Protected Routes

Complete POS Routing Setup

Enhanced Navigation Component

Query Parameters

Redirects and Navigation Guards

Updated ProtectedRoute

Real POS Example: Complete Order Flow

Common Mistakes to Avoid

1. Using `<a>` Instead of `<Link>`

2. Forgetting BrowserRouter

3. Not Handling 404s

4. Hardcoding URLs

Key Learnings

Next Steps

hashtagWhat Is React Router?

hashtagInstallation

hashtagYour First Routes

hashtagNavigation with Link

hashtagNavLink for Active Styling

hashtagRoute Parameters

hashtagAccessing Parameters with useParams

hashtagLinking to Dynamic Routes

hashtagProgrammatic Navigation

hashtagNested Routes

hashtagProtected Routes (Authentication)

hashtagUsing Protected Routes

hashtagComplete POS Routing Setup

hashtagEnhanced Navigation Component

hashtagQuery Parameters

hashtagRedirects and Navigation Guards

hashtagRedirect After Login

hashtagUpdated ProtectedRoute

hashtagReal POS Example: Complete Order Flow

hashtagCommon Mistakes to Avoid

hashtag1. Using <a> Instead of <Link>

hashtag2. Forgetting BrowserRouter

hashtag3. Not Handling 404s

hashtag4. Hardcoding URLs

hashtagKey Learnings

hashtagNext Steps

What Is React Router?

Installation

Your First Routes

Navigation with Link

NavLink for Active Styling

Route Parameters

Accessing Parameters with useParams

Linking to Dynamic Routes

Programmatic Navigation

Nested Routes

Protected Routes (Authentication)

Using Protected Routes

Complete POS Routing Setup

Enhanced Navigation Component

Query Parameters

Redirects and Navigation Guards

Redirect After Login

Updated ProtectedRoute

Real POS Example: Complete Order Flow

Common Mistakes to Avoid

1. Using `<a>` Instead of `<Link>`

2. Forgetting BrowserRouter

3. Not Handling 404s

4. Hardcoding URLs

Key Learnings

Next Steps