Link component basic usage
Link is a progressively enhanced wrapper around the HTML anchor tag that enables client-side routing. It is imported from 'react-router'. The basic usage is <Link to="/dashboard">Dashboard</Link>.
React Router · API · all subjects
link
15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Link to prop with path object
The to prop can accept either a string or a partial Path object containing pathname, search, and hash properties. Example: <Link to={{ pathname: "/some/path", search: "?query=string", hash: "#hash" }} />
Link discover prop values
The discover prop defines lazy route discovery behavior with two options: 'render' (default, discover the route when the link renders) and 'none' (don't eagerly discover, only discover if the link is clicked). Available in framework mode.
Link prefetch prop values and behavior
The prefetch prop defines data and module prefetching behavior with four options: 'none' (default, no prefetching), 'intent' (prefetches when user hovers or focuses the link), 'render' (prefetches when the link renders), and 'viewport' (prefetches when the link is in the viewport, useful for mobile). Prefetching is implemented using HTML <link rel="prefetch"> tags inserted after the link. Available in framework mode.
Link prefetch CSS selector caution
When using prefetch on Link components, prefetch link elements may conditionally render. If using CSS selectors like nav :last-child, use nav :last-of-type instead to prevent styles from conditionally falling off the last link.
Link relative prop values and behavior
The relative prop defines relative path behavior with two options: 'route' (default, resolves the link relative to the route pattern) and 'path' (relative to the path). For example, in a route hierarchy with parent pattern 'blog' and child pattern 'blog/:slug/edit', a relative link of '...' with route mode removes both :slug/edit segments back to '/blog', while path mode removes only one URL segment to '/blog/:slug'. Index routes and layout routes do not have paths and are not included in the relative path calculation. Available in all modes.
Link reloadDocument prop
The reloadDocument prop uses document navigation instead of client-side routing when the link is clicked. The browser handles the transition normally as if it were a standard HTML anchor tag. Available in all modes.
Link replace prop
The replace prop replaces the current entry in the History stack instead of pushing a new one. For example, with a history stack A -> B, a normal link click results in A -> B -> C, but with replace it results in A -> C. Available in all modes.
Link state prop
The state prop adds persistent client-side routing state to the next location. The location state is accessed via the useLocation hook. Example: <Link to="/somewhere/else" state={{ some: "value" }} />. The state is then accessible in another component with const location = useLocation(); location.state; // { some: "value" }. This state is inaccessible on the server as it is implemented on top of history.state. Available in all modes.
Link to prop
The to prop is required and specifies the destination. It can be a string path or a partial Path object with pathname, search, and hash properties. Available in all modes.
Link defaultShouldRevalidate prop
The defaultShouldRevalidate prop specifies the default revalidation behavior for the navigation. If no shouldRevalidate functions are present on the active routes, this value will be used directly. Otherwise it will be passed into shouldRevalidate so the route can make the final determination on revalidation. This is useful when updating search params and you don't want to trigger a revalidation. By default (when not specified), loaders will revalidate according to the router's standard revalidation behavior. Available in all modes.
Link mask prop
The mask prop specifies a masked path for navigation, allowing the router to navigate to one location while displaying a separate location in the URL bar. This is useful for contextual navigations such as opening an image in a modal on top of a gallery. If a user shares the masked URL or opens the link in a new tab, they will only load the masked location without the underlying contextual location. This feature relies on history.state and is intended for SPA uses only; SSR renders will not respect the masking. Available in framework and data modes.
Link mask prop example with gallery modal
Example showing Link with mask prop for a modal image gallery: <Link key={image.id} to={`/gallery?image=${image.id}`} mask={`/images/${image.id}`}><img src={image.url} alt={image.alt} /></Link>. The loaderData is retrieved with a clientLoader that checks for 'image' search param: let sp = new URL(request.url).searchParams; return { images: getImages(), modalImage: sp.has("image") ? getImage(sp.get("image")!) : null }.
Link discover prop
Link components have a discover prop that controls automatic route discovery. By default, links are automatically discovered. Setting discover="none" opts out of discovery for specific links.
Link preventScrollReset prop
The Link component accepts a preventScrollReset prop that disables scroll position reset behavior for that specific navigation. The scroll reset only happens if scroll cannot be restored to a previously known location for that scroll restoration key.