link.md

Link

It renders a with handling routing.

import { Link } from 'atomic-router-react';

Examples

import { createRoute } from 'atomic-router';
import { Link } from 'atomic-router-react';

const homeRoute = createRoute();
const postRoute = createRoute<{ postId: string }>();

function Example() {
  return (
    <div>
      <Link to={homeRoute}>Route link</Link>
      <Link to={postRoute} params={{ postId: 1 }}>
        Route link with params
      </Link>
      <Link to="https://example.com">External link</Link>
    </div>
  );
}

All params:

import { Link } from 'atomic-router-react';

export function Example() {
  return (
    <Link
      to={route}
      params={{ foo: 'bar' }}
      query={{ bar: 'baz' }}
      activeClassName="font-semibold text-red-400"
      inactiveClassName="opacity-80"
    />
  );
}

Prevent navigation:

import { Link } from 'atomic-router-react';

export function Example() {
  return (
    <Link
      to={route}
      onClick={event => event.preventDefault()}
    />
  );
}