Skip to content

Commit

Permalink
Docs: update link.mdx (vercel#61508)
Browse files Browse the repository at this point in the history
Updated paths in relation to `<Link />` and middleware rewrites. Feel
free to leave suggestions if needed, this has always confused me a
little bit.

**Old Version**:
For example, if you have a Dynamic Route like `/dashboard/[user]` that
you want to present differently via middleware, you would write: `<Link
href={{ pathname: '/dashboard/authed/[user]', query: { user: username }
}} as="/dashboard/[user]">Profile</Link>`.

The `as` prop should be the URL we want to display while href/pathname
is the actual path. So if we want to present something differently via
middleware, we would do so via `as`. In the example above we want to
display `/dashboard/[user]` differently but we use
`as='/dashboard/[user]'`.
  • Loading branch information
kevinmitch14 authored Feb 16, 2024
1 parent e71046b commit d397832
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/02-app/02-api-reference/01-components/link.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
const isAuthed = useIsAuthed()
const path = isAuthed ? '/auth/dashboard' : '/dashboard'
const path = isAuthed ? '/auth/dashboard' : '/public/dashboard'
return (
<Link as="/dashboard" href={path}>
Dashboard
Expand All @@ -495,7 +495,7 @@ export default function Page() {

<PagesOnly>

> **Good to know**: If you're using [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes), you'll need to adapt your `as` and `href` props. For example, if you have a Dynamic Route like `/dashboard/[user]` that you want to present differently via middleware, you would write: `<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>`.
> **Good to know**: If you're using [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes), you'll need to adapt your `as` and `href` props. For example, if you have a Dynamic Route like `/dashboard/authed/[user]` that you want to present differently via middleware, you would write: `<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>`.
</PagesOnly>

Expand Down

0 comments on commit d397832

Please sign in to comment.