Router Link

Router Link is a TanStack Router-aware link component built with MUI's Link. It is created via createLink and renders client-side navigation without a full page reload, with MUI hover underline styling and the next-btn-link class.

Use RouterLink when you want a typed, router-bound link inside a TanStack Router app. For a simpler link with an href prop, see NextLink.

Import

import { RouterLink } from '@js-smart/react-kit';

Basic usage

Mount your app with TanStack Router, then use RouterLink with the to prop:

<RouterLink to="/dashboard">Dashboard</RouterLink>

With MUI Link props

RouterLink accepts standard MUI Link props such as color, variant, and underline:

<RouterLink to="/settings" color="primary" underline="always">
  Settings
</RouterLink>

With route params

Pass TanStack Router link options such as params and search alongside MUI props:

<RouterLink to="/books/$bookId" params={{ bookId: '42' }}>
  View book
</RouterLink>

Accessibility

Set aria-label when the visible link text is not descriptive enough for screen readers.

Peer dependencies

RouterLink requires @tanstack/react-router and a registered router instance in your app tree. It also uses @mui/material. See Installation.

Props

RouterLink combines TanStack Router Link props with MUI Link props.

Prop	Type	Default	Description
`to`	`string`	—	Required. Target route path.
`params`	`object`	—	Route params for dynamic segments.
`search`	`object`	—	URL search/query params.
`children`	`ReactNode`	—	Link content.
`className`	`string`	—	CSS class. The `next-btn-link` class is applied by default.
`underline`	`'none' \| 'hover' \| 'always'`	`'hover'`	MUI underline behavior.
`color`	MUI Link color	—	MUI link color.
`aria-label`	`string`	—	Accessible label for the link.

Import​

Basic usage​

With MUI Link props​

With route params​

Accessibility​

Peer dependencies​

Props​