Link

Navigation component that renders an anchor tag and handles route opening on click.

Import

import { Link } from '@effector/router-react';

Usage

import { Link } from '@effector/router-react';
import { profileRoute, postRoute } from './routes';

function Navigation() {
  return (
    <nav>
      &lt;Link to={profileRoute}&gt;Profile&lt;/Link&gt;
      &lt;Link to={postRoute} params={ { id: '123' } }&gt;
        View Post
      &lt;/Link&gt;
    </nav>
  );
}

With Parameters

Pass route parameters:

import { Link } from '@effector/router-react';
import { createRoute } from '@effector/router';

const userRoute = createRoute({ path: '/user/:id' });

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          &lt;Link to={userRoute} params={ { id: user.id } }&gt;
            {user.name}
          &lt;/Link&gt;
        </li>
      ))}
    </ul>
  );
}

With Query Parameters

Add query parameters to the URL:

<Link to={searchRoute} query={ { q: 'react', sort: 'popular' } }>
  Search React
</Link>

The href always includes the complete path params and effective query. When query is omitted, the current router query is preserved; an explicit object replaces it, and {} clears it. Calling route.open with the same payload produces the same URL.

Replace Navigation

Use replace to replace current history entry:

<Link to={loginRoute} replace>
  Login
</Link>

Props

to (required)

The route to navigate to:

<Link to={homeRoute}>Home</Link>

params (optional)

Route parameters (required if route has parameters):

const userRoute = createRoute({ path: '/user/:id/:tab' });

<Link to={userRoute} params={ { id: '123', tab: 'posts' } }>
  User Posts
</Link>;

query (optional)

Query parameters to add to the URL:

<Link to={searchRoute} query={ { q: 'term', filter: 'active' } }>
  Search
</Link>

replace (optional)

Replace current history entry instead of pushing:

<Link to={homeRoute} replace>
  Home
</Link>

Standard Anchor Props

All standard HTML anchor props are supported:

<Link
  to={externalRoute}
  className="nav-link"
  target="_blank"
  rel="noopener noreferrer"
>
  External Link
</Link>

Link also forwards a ref to the underlying <a> element, so focus and measurement work like they do for a native anchor. Route parameters remain conditionally required by LinkProps: a route with :id requires params={ {id: ...} }, while a path without parameters accepts omitted params.

LinkProps

LinkProps is the public generic prop type used by Link. Import it when wrapping Link or declaring props for a component that forwards navigation and anchor attributes.

import type { LinkProps } from '@effector/router-react';

LinkProps<Params> combines standard <a> attributes (except href) with these router props:

Property	Type	Description
to	Route<Params>	Target route.
params	Params	Route parameters. Required when the route has required params; otherwise optional.
query	Query	Query to use for navigation. Omit it to preserve the current query; pass {} to clear it.
replace	boolean	Replace the current history entry instead of pushing a new one.

import { Link, type LinkProps } from '@effector/router-react';

function NavLink<Params extends object | void>(props: LinkProps<Params>) {
  return <Link {...props} className="nav-link" />;
}

Behavior

Click Handling

The Link component:

• Intercepts only an ordinary primary-button, same-origin _self click
• Opens the route via effector/router Router
• Respects modifier keys (cmd/ctrl click opens in new tab)
• Preserves native behavior for secondary clicks, downloads, non-_self targets, and cross-origin URLs
• Allows custom onClick handlers
• Supports e.preventDefault() to cancel navigation

<Link
  to={profileRoute}
  onClick={(e) => {
    if (!user.isLoggedIn) {
      e.preventDefault();
      showLoginModal();
    }
  }}
>
  Profile
</Link>

External Links

Links with target attribute other than _self use default browser behavior:

<Link to={docsRoute} target="_blank">
  Open Docs in New Tab
</Link>

Modifier Keys

Holding modifier keys uses browser's default behavior:

• Cmd/Ctrl + Click - Open in new tab
• Shift + Click - Open in new window
• Alt/Option + Click - Download
• Ctrl + Shift + Click - Open in new window (some browsers)

Type Safety

Parameters are type-checked:

const postRoute = createRoute({ path: '/post/:id' });

// ✅ Correct
<Link to={postRoute} params={ { id: '123' } }>Post</Link>

// ❌ TypeScript error - missing params
<Link to={postRoute}>Post</Link>

// ❌ TypeScript error - wrong type
<Link to={postRoute} params={ { id: 123 } }>Post</Link>

Styling

Style like a regular anchor tag:

<Link
  to={homeRoute}
  className="nav-link active"
  style={ { color: 'blue', textDecoration: 'none' } }
>
  Home
</Link>

Ref Support

Link supports refs:

import { useRef } from 'react';

function Navigation() {
  const linkRef = useRef<HTMLAnchorElement>(null);

  return (
    &lt;Link ref={linkRef} to={homeRoute}&gt;
      Home
    &lt;/Link&gt;
  );
}

See Also

• useLink - Hook for link functionality
• createRouteView - Create route views
• useRouter - Access router in components