`<Link />`

The <Link> component provides declarative, client-side navigation with automatic prefetching and View Transitions support.

Component Signature

import { Link } from 'manicjs';

type LinkProps = {
  to: string;
  prefetch?: boolean;
  replace?: boolean;
  viewTransitionName?: string;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
};

Props

Prop

Type

Examples

Basic Usage

import React from 'react';
import {  } from 'manicjs';

export function () {
  return (
    <>
      < ="/">Home</>
      < ="/about">About</>
      < ="/posts">Blog</>
    </>
  );
}

With Dynamic Path

import React from 'react';
import {  } from 'manicjs';

export function ({  }: { : <{ : string; : string }> }) {
  return (
    <>
      {.( => (
        < ={.}>
          < ={`/posts/${.}`}>{.}</>
        </>
      ))}
    </>
  );
}

Conditional Replace

import React from 'react';
import {  } from 'manicjs';

export function ({ ,  }: { : string; ?: boolean }) {
  return (
    <
      ={`/blog/${}`}
      ={}
      ={ ? 'font-bold text-lg' : ''}
    >
      {}
    </>
  );
}

Disable Prefetching

import React from 'react';
import {  } from 'manicjs';

export function () {
  // Disable prefetch for large lists to avoid memory pressure
  return (
    <>
      {.({ : 1000 }).((, ) => (
        < ={} ={`/item/${}`} ={false}>
          Item {}
        </>
      ))}
    </>
  );
}

Named view transitions

Optional viewTransitionName sets view-transition-name on the anchor so you can target this element in CSS for shared-element-style animations:

import React from 'react';
import {  } from 'manicjs';

export function () {
  return (
    < ="/user/1" ="user-card">
      Open profile
    </>
  );
}

Disabling view transitions globally

Per-link toggle is not exposed on <Link>. Turn transitions off for all navigations via config or runtime:

import {  } from 'manicjs';

(false);

Or set router.viewTransitions: false in manic.config.ts.

Type Definitions

interface LinkProps {
  to: string;
  prefetch?: boolean;
  replace?: boolean;
  viewTransitionName?: string;
  className?: string;
  style?: React.CSSProperties;
  children?: ReactNode;
}

declare const Link: React.ComponentType<LinkProps>;

How It Works

Initializing diagram...

Features

Feature	Description
Prefetch	Loads route JS on hover/focus
Code Splitting	Each route is a separate chunk
View Transitions	Smooth animated navigation
Cache	Loaded chunks in memory
History	Browser history integration

Link