Author: M Abo Bakar Aslam

Navigation Between Components

Before continuing this lesson, you can download the starting code using the links provided. This will help you run and understand all examples easily.

2. Example Code 1

Each page will be displayed only when its corresponding URL is accessed.

You should have following pages. If you download starting-application provided by the author, then the application already have these all pages.

• Header
• Navbar
• Home
• Diary
• Register
• Login
• Footer

The Navbar component contains navigation links for switching between pages.

Step 2.1. Updating Navbar Component for Navigation

Navigation between components is handled using:

• Link tag
• Anchor tag (<a>)

Key Points

• Navigation using Link does not refresh the page, while <a> does
• The href attribute is used to specify path

For demonstration purposes, both approaches are used.

// File: Navbar/page.tsx located in app-name/src/app/(website)/componenet/Navbar/
 
import Link from "next/link";
 
export default function Navbar() {
  return (
    <div style={{ backgroundColor: "green", color: "white", padding: "5px", display: "flex", gap: "15px" }}>
      <Link href="/">Home</Link>
      <a href="/diary">Diary</a>
      <Link href="/login">Login</Link>
      <Link href="/register">Register</Link>
    </div>
  )
}