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.

Text Link​

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