47d2dfdb54
### Description The current implementation of the activeClassName example doesn't support the `UrlObject` type for the "href" Link prop. For example ``` <ActiveLink activeClassName="active" className="nav-link" href={{ pathname: "/[slug]", query: { slug: "dynamic-route", }, }} > Dynamic Route </ActiveLink> ``` won't work. ### Suggestion We can use the `resolveHref` function to handle all cases. Co-authored-by: Sam Ko <sam@vercel.com> |
||
---|---|---|
.. | ||
components | ||
pages | ||
.gitignore | ||
next-env.d.ts | ||
next.config.js | ||
package.json | ||
README.md | ||
tsconfig.json |
activeClassName example
ReactRouter has a convenience property on the Link
element to allow an author to set the active className on a link. This example replicates that functionality using Next's own Link
.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example active-class-name active-class-name-app
yarn create next-app --example active-class-name active-class-name-app
pnpm create next-app --example active-class-name active-class-name-app
Deploy it to the cloud with Vercel (Documentation).