React — Navigation

Basic Navigation

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

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Contact</Link>
        </nav>
    );
}

Active Navigation

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

function Navbar() {
    return (
        <nav>
            <NavLink
                to="/"
                className={({ isActive }) => isActive ? 'active' : ''}
            >
                Home
            </NavLink>
            <NavLink
                to="/about"
                className={({ isActive }) => isActive ? 'active' : ''}
            >
                About
            </NavLink>
        </nav>
    );
}

Navigation with State

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

function Navbar() {
    const location = useLocation();

    return (
        <nav>
            <Link
                to="/"
                className={location.pathname === '/' ? 'active' : ''}
            >
                Home
            </Link>
            <Link
                to="/about"
                className={location.pathname === '/about' ? 'active' : ''}
            >
                About
            </Link>
        </nav>
    );
}

Programmatic Navigation

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

function LoginForm() {
    const navigate = useNavigate();

    const handleSubmit = async (e) => {
        e.preventDefault();
        const success = await login(credentials);
        if (success) {
            navigate('/dashboard');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            {/* form fields */}
            <button type="submit">Login</button>
        </form>
    );
}

Navigation Examples

// Sidebar navigation
function Sidebar() {
    const location = useLocation();

    const links = [
        { path: '/dashboard', label: 'Dashboard', icon: '📊' },
        { path: '/users', label: 'Users', icon: '👥' },
        { path: '/settings', label: 'Settings', icon: '⚙️' },
    ];

    return (
        <aside className="sidebar">
            {links.map(link => (
                <Link
                    key={link.path}
                    to={link.path}
                    className={location.pathname === link.path ? 'active' : ''}
                >
                    <span>{link.icon}</span>
                    <span>{link.label}</span>
                </Link>
            ))}
        </aside>
    );
}

// Breadcrumb navigation
function Breadcrumbs() {
    const location = useLocation();
    const paths = location.pathname.split('/').filter(Boolean);

    return (
        <nav className="breadcrumbs">
            <Link to="/">Home</Link>
            {paths.map((path, index) => (
                <span key={index}>
                    {' / '}
                    <Link to={`/${paths.slice(0, index + 1).join('/')}`}>
                        {path}
                    </Link>
                </span>
            ))}
        </nav>
    );
}

// Tab navigation
function Tabs({ tabs }) {
    const location = useLocation();

    return (
        <div className="tabs">
            {tabs.map(tab => (
                <Link
                    key={tab.path}
                    to={tab.path}
                    className={location.pathname === tab.path ? 'active' : ''}
                >
                    {tab.label}
                </Link>
            ))}
        </div>
    );
}

Mini Practice

Write React code that:

1. Creates a basic navigation
2. Adds active navigation styling
3. Implements programmatic navigation
4. Creates a sidebar navigation

Up Next

Next: Learn about API Calls.