React Routes and Links

A Route defines what should be displayed when the browser URL matches a particular path.

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

Here, the /about path is connected to the About component.

The Routes component is used to contain one or more Route definitions.

<Routes>

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

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

</Routes>

The path prop specifies the URL pattern for a route.

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

The route above is associated with the /contact URL.

The element prop specifies the React element that should be displayed for a matching route.

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

The About component is displayed when the route matches.

The root path / is commonly used for the home page.

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

When the application opens at the root URL, the Home component can be displayed.

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

This route connects the /about path with the About component.

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

The Contact component can be displayed when the user visits /contact.

A React application can contain multiple routes.

<Routes>

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

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

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

</Routes>

The Link component is used to create navigation links in a React Router application.

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

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

The to prop specifies the destination route for a Link.

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

When the user clicks the link, the application navigates to /contact.

A navigation menu can contain multiple Link components.

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>
    );
}

Use to="/" to create a link to the root route.

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

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

This link navigates the user to the /about route.

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

The destination is determined by the value of the to prop.

Traditional HTML navigation uses an anchor element:

<a href="/about">
    About
</a>

React Router provides:

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

For internal React Router navigation, Link is commonly used.

The Link component is designed for navigation within a React Router application.

• Connects to application routes.
• Provides client-side navigation.
• Works with React Router.
• Can be used inside navigation menus.
• Helps create SPA-style navigation.

A Route defines where a URL should display a component, while a Link provides a way for the user to navigate to that URL.

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

<Routes>

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

</Routes>

It is a good practice to create a reusable navigation component.

function Navbar() {

    return (
        <nav>

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

            {" | "}

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

            {" | "}

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

        </nav>
    );
}

Before using Link, import it from react-router-dom.

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

Without the correct import, React will not know what Link refers to.

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

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

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

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

function AppRoutes() {

    return (
        <Routes>

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

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

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

        </Routes>
    );
}

export default AppRoutes;

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>
    );
}

export default Navbar;

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

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

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

function App() {

    return (
        <>

            <nav>

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

                {" | "}

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

            </nav>

            <Routes>

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

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

            </Routes>

        </>
    );
}

Links do not have to be placed only in one navigation component. They can also be used in other components.

function Home() {

    return (
        <div>

            <h1>Home</h1>

            <Link to="/products">
                View Products
            </Link>

        </div>
    );
}

A Link can be styled with CSS classes to look like a button.

<Link
    to="/contact"
    className="btn btn-primary"
>
    Contact Us
</Link>

This is useful when Bootstrap is being used in a React application.

A link can be displayed after a form or other content to provide navigation.

function Login() {

    return (
        <div>

            <h2>Login</h2>

            <form>
                <input
                    type="email"
                    placeholder="Email"
                />
            </form>

            <Link to="/register">
                Create an Account
            </Link>

        </div>
    );
}

After authentication, an application may provide a link to a dashboard.

<Link
    to="/dashboard"
    className="btn btn-success"
>
    Go to Dashboard
</Link>

The corresponding route could be:

<Route
    path="/dashboard"
    element={<Dashboard />}
/>

• Forgetting to import Link.
• Using href when a React Router Link is intended.
• Writing an incorrect path.
• Forgetting the to prop.
• Using Route outside Routes.
• Using Link outside router context.
• Forgetting to define the route for a destination.

A simple workflow is:

1. Create a component
        ↓
2. Create a Route
        ↓
3. Assign a path
        ↓
4. Create a Link
        ↓
5. Set the Link's "to" value
        ↓
6. Click the Link
        ↓
7. Matching Route displays component

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

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

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

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

function App() {

    return (
        <BrowserRouter>

            <nav>

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

                {" | "}

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

                {" | "}

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

            </nav>

            <Routes>

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

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

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

            </Routes>

        </BrowserRouter>
    );
}

export default App;

• Use meaningful route paths.
• Use Link for internal React Router navigation.
• Keep navigation menus reusable.
• Keep route definitions organized.
• Use descriptive page component names.
• Make sure every important Link has a matching route.
• Test all navigation links.
• Use CSS or Bootstrap classes to make navigation user-friendly.
• Keep routes easy to understand.
• Handle invalid or missing routes in larger applications.

Link
 ↓
URL
 ↓
Route
 ↓
Component