mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Hemanshu Upadhyay
d0ea931f5a
Updated/Migrated the active-class-name example to the App router This PR contains the Following Changes. Pages folder Converted into App Folder. Updated file Structure according to the App Router convention Updated ActiveLink Component as per App router. --------- Co-authored-by: samcx <sam@vercel.com>
46 lines
930 B
TypeScript
46 lines
930 B
TypeScript
"use client";
|
|
|
|
import ActiveLink from "./ActiveLink";
|
|
|
|
const Nav = () => (
|
|
<nav>
|
|
<style jsx global>{`
|
|
.nav-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.active:after {
|
|
content: " (current page)";
|
|
}
|
|
`}</style>
|
|
<ul className="nav">
|
|
<li>
|
|
<ActiveLink activeClassName="active" className="nav-link" href="/">
|
|
Home
|
|
</ActiveLink>
|
|
</li>
|
|
<li>
|
|
<ActiveLink activeClassName="active" className="nav-link" href="/about">
|
|
About
|
|
</ActiveLink>
|
|
</li>
|
|
<li>
|
|
<ActiveLink activeClassName="active" className="nav-link" href="/blog">
|
|
Blog
|
|
</ActiveLink>
|
|
</li>
|
|
<li>
|
|
<ActiveLink
|
|
activeClassName="active"
|
|
className="nav-link"
|
|
href="/dynamic-route"
|
|
>
|
|
Dynamic Route
|
|
</ActiveLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
);
|
|
|
|
export default Nav;
|