Skip to main content

Link

ts
import { Link } from 'solito/link'
ts
import { Link } from 'solito/link'

A drop-in replacement for Next.js' <Link /> component. It follows the exact same API.

tsx
<Link href="/" />
tsx
<Link href="/" />

Props

viewProps

Props used by the underlying View.

tsx
<Link viewProps={{ style: { height: 100 } }} href="/">
<View />
</Link>
tsx
<Link viewProps={{ style: { height: 100 } }} href="/">
<View />
</Link>

Next.js props

It also supports the props from Next.js' <Link /> component, besides passHref.

Configuration

Before a Link can work on iOS and Android, you'll need to properly configure your linking config with React Navigation.

See their docs:

Wrapper components

You can easily create wrapper components for your links:

tsx
export const ArtistLink = ({ slug }) => (
<Link href={`/artists/${slug}`} as={`/@${slug}`} shallow>
<View />
</Link>
)
tsx
export const ArtistLink = ({ slug }) => (
<Link href={`/artists/${slug}`} as={`/@${slug}`} shallow>
<View />
</Link>
)

Children recommendation

You shouldn't render a Pressable or Touchable as a child of a Link component. Doing so can mess with the press events on Web and cause issues with next/router.

tsx
// 🚨 this is bad, it uses Pressable
<Link href="/">
<Pressable />
</Link>
tsx
// 🚨 this is bad, it uses Pressable
<Link href="/">
<Pressable />
</Link>
tsx
// ✅ this is good, it uses a View
<Link href="/">
<View />
</Link>
tsx
// ✅ this is good, it uses a View
<Link href="/">
<View />
</Link>

Workarounds

Disable the pressable

Sometimes, this can be tough to get around. What if you want to wrap a Button with a Link?

Technically, if the child touchable is disabled, then it won't capture touch events, so that is fine.

tsx
// ✅ this is okay, since it's disabled
<Link href="/">
<Pressable disabled />
</Link>
tsx
// ✅ this is okay, since it's disabled
<Link href="/">
<Pressable disabled />
</Link>

However, this might throw off your styling or interaction events. Chances are, you don't want to disable the button altogether. So what else can we do?

Use Dripsy's as prop

If you're using Dripsy, you can utilize the as prop and forward it down to your pressable:

tsx
import { Pressable, View } from 'dripsy'
import { Link } from 'solito/link'
 
// your button component
const Button = ({ as, children }: React.ComponentProps<typeof Pressable>) => (
<Pressable as={as}>{children}</Pressable>
)
 
export const ButtonLink = () => (
<Link href="/">
<Button as={View} />
</Link>
)
tsx
import { Pressable, View } from 'dripsy'
import { Link } from 'solito/link'
 
// your button component
const Button = ({ as, children }: React.ComponentProps<typeof Pressable>) => (
<Pressable as={as}>{children}</Pressable>
)
 
export const ButtonLink = () => (
<Link href="/">
<Button as={View} />
</Link>
)

If you're using something like MotiPressable, where none of the above solutions are viable, you can create a custom Link component.

In order to preserve accessibility on Web for links, we'll need to utilize a few tricks.

See the custom link guide.

If you need to render a text node in your link, reference the <TextLink /> docs.