Skip to main content

TextLink

tsx
import { TextLink } from 'solito/link'
tsx
import { TextLink } from 'solito/link'

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

The difference from Solito's <Link /> component is that this component accepts Text nodes as children.

tsx
<TextLink href="/">Home</TextLink>
tsx
<TextLink href="/">Home</TextLink>

You can also put nested Text components inside:

tsx
<TextLink href="/">
  Go <Text>Home</Text>
</TextLink>
tsx
<TextLink href="/">
  Go <Text>Home</Text>
</TextLink>

Props​

textProps​

Props used by the underlying Text component.

tsx
<TextLink textProps={{ style: { color: 'blue' } }} href="/">
  Link to <Text style={{ fontWeight: 'bold' }}>Home</Text>
</TextLink>
tsx
<TextLink textProps={{ style: { color: 'blue' } }} href="/">
  Link to <Text style={{ fontWeight: 'bold' }}>Home</Text>
</TextLink>

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: