React Navigation

Navigation means moving from one route or page to another within an application.

For example:

/home
/about
/courses
/contact

Users can navigate between these routes using links, menus, buttons, or programmatic navigation.

React Router provides tools that make navigation between application routes easier.

Common navigation tools include:

• Link
• NavLink
• useNavigate

The Link component is one of the simplest ways to navigate between routes.

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

<Link to="/about">
    About
</Link>

Clicking the link navigates to the /about route.

The to prop specifies where the Link should navigate.

<Link to="/contact">
    Contact
</Link>

The destination in this example is /contact.

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

function Navbar() {

    return (
        <nav>

            <Link to="/">
                Home
            </Link>

            <Link to="/about">
                About
            </Link>

            <Link to="/courses">
                Courses
            </Link>

            <Link to="/contact">
                Contact
            </Link>

        </nav>
    );
}

NavLink is similar to Link, but it provides information about whether the current link matches the active route.

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

<NavLink to="/about">
    About
</NavLink>

This is useful for navigation menus where the active page should look different.

An active navigation link can be styled differently from other links.

<NavLink
    to="/about"
    className={({ isActive }) =>
        isActive ? "active" : ""
    }
>
    About
</NavLink>

The isActive value tells you whether the link currently matches the active route.

You can use a function with className to apply different classes.

<NavLink
    to="/courses"
    className={({ isActive }) =>
        isActive
            ? "nav-link active"
            : "nav-link"
    }
>
    Courses
</NavLink>

The useNavigate Hook allows a component to navigate programmatically.

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

function Home() {

    const navigate = useNavigate();

    return (
        <button onClick={() => navigate("/about")}>
            Go to About
        </button>
    );
}

Programmatic navigation means changing the route using JavaScript rather than clicking a Link.

const navigate = useNavigate();

navigate("/dashboard");

This can be useful after actions such as submitting a form or completing a login process.

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

function Login() {

    const navigate = useNavigate();

    function handleLogin() {

        // Login logic

        navigate("/dashboard");
    }

    return (
        <button onClick={handleLogin}>
            Login
        </button>
    );
}

After the login logic completes, the user can be navigated to the dashboard.

Programmatic navigation can also be used after registration.

function Register() {

    const navigate = useNavigate();

    function handleRegister() {

        // Registration logic

        navigate("/login");
    }

    return (
        <button onClick={handleRegister}>
            Register
        </button>
    );
}

The navigate function can also move backward in the browser history.

const navigate = useNavigate();

navigate(-1);

The value -1 moves back one history entry.

You can move forward in browser history by using a positive number.

const navigate = useNavigate();

navigate(1);

This moves forward one history entry when a forward entry exists.

function Home() {

    const navigate = useNavigate();

    return (
        <button
            className="btn btn-primary"
            onClick={() => navigate("/about")}
        >
            About
        </button>
    );
}

This allows a button to perform navigation.

<Link to="/about">
    About
</Link>

navigate("/about");

Navigation can also be used with dynamic route parameters.

const studentId = 101;

<Link to={`/students/${studentId}`}>
    View Student
</Link>

The resulting URL is:

/students/101

const navigate = useNavigate();

const studentId = 101;

navigate(`/students/${studentId}`);

This is useful when the destination depends on a value calculated or received by the application.

A dashboard can provide navigation to different sections.

function DashboardMenu() {

    return (
        <nav>

            <NavLink to="/dashboard">
                Home
            </NavLink>

            <NavLink to="/dashboard/profile">
                Profile
            </NavLink>

            <NavLink to="/dashboard/settings">
                Settings
            </NavLink>

        </nav>
    );
}

A sidebar can use NavLink to provide navigation and highlight the current section.

function Sidebar() {

    return (
        <aside>

            <NavLink to="/dashboard">
                Dashboard
            </NavLink>

            <NavLink to="/students">
                Students
            </NavLink>

            <NavLink to="/courses">
                Courses
            </NavLink>

            <NavLink to="/settings">
                Settings
            </NavLink>

        </aside>
    );
}

If Bootstrap is used, classes can be conditionally applied to the active navigation item.

<NavLink
    to="/dashboard"
    className={({ isActive }) =>
        isActive
            ? "nav-link active bg-primary text-white"
            : "nav-link"
    }
>
    Dashboard
</NavLink>

A navigation URL can also contain a query string.

<Link to="/products?category=mobile">
    Mobile Products
</Link>

The URL contains:

/products?category=mobile

Query strings can be useful for filters, searches, and other URL-based options.

A child component can use useNavigate when it needs to navigate programmatically.

function StudentCard() {

    const navigate = useNavigate();

    function viewStudent() {
        navigate("/students/101");
    }

    return (
        <button onClick={viewStudent}>
            View Student
        </button>
    );
}

After successfully saving data, an application can navigate the user to another page.

async function saveStudent() {

    // Save student data

    navigate("/students");
}

This can provide a simple workflow after successful operations.

• Forgetting to import Link, NavLink, or useNavigate.
• Using useNavigate outside router context.
• Using incorrect route paths.
• Forgetting the to prop on Link.
• Using the wrong dynamic parameter.
• Creating links to routes that do not exist.
• Using programmatic navigation when a simple Link is sufficient.

A typical navigation workflow is:

User Action
     ↓
Link / NavLink / Button
     ↓
Route Changes
     ↓
React Router Matches Route
     ↓
Component Displays

For programmatic navigation, JavaScript can trigger the route change.

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

function Home() {
    return <h2>Home Page</h2>;
}

function About() {
    return <h2>About Page</h2>;
}

function Contact() {
    return <h2>Contact Page</h2>;
}

function App() {

    return (
        <BrowserRouter>

            <nav>

                <NavLink to="/">
                    Home
                </NavLink>

                {" | "}

                <NavLink to="/about">
                    About
                </NavLink>

                {" | "}

                <NavLink to="/contact">
                    Contact
                </NavLink>

            </nav>

            <Routes>

                <Route
                    path="/"
                    element={<Home />}
                />

                <Route
                    path="/about"
                    element={<About />}
                />

                <Route
                    path="/contact"
                    element={<Contact />}
                />

            </Routes>

        </BrowserRouter>
    );
}

export default App;

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

function Home() {

    const navigate = useNavigate();

    return (
        <div>

            <h2>Home Page</h2>

            <button
                onClick={() => navigate("/about")}
                className="btn btn-primary"
            >
                Go to About
            </button>

        </div>
    );
}

function About() {
    return <h2>About Page</h2>;
}

function App() {

    return (
        <BrowserRouter>

            <Routes>

                <Route
                    path="/"
                    element={<Home />}
                />

                <Route
                    path="/about"
                    element={<About />}
                />

            </Routes>

        </BrowserRouter>
    );
}

export default App;

• Use Link for simple internal navigation.
• Use NavLink when active link styling is required.
• Use useNavigate for programmatic navigation.
• Keep navigation menus reusable.
• Use meaningful route paths.
• Make active navigation easy to identify.
• Test navigation on every important route.
• Use dynamic URLs carefully.
• Do not create unnecessary programmatic navigation.
• Keep navigation logic simple and predictable.

Link → Simple Navigation

NavLink → Active Navigation

useNavigate → Programmatic Navigation