b2df2cff26
I updated the `active-class-name` example to stop using the legacy behavior. ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
44 lines
928 B
TypeScript
44 lines
928 B
TypeScript
import ActiveLink from './ActiveLink'
|
|
|
|
const Nav = () => (
|
|
<nav>
|
|
<style jsx>{`
|
|
.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="/[slug]"
|
|
as="/dynamic-route"
|
|
>
|
|
Dynamic Route
|
|
</ActiveLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)
|
|
|
|
export default Nav
|