Rocon Website

Link

Link: <Match>(props: LinkProps<Match>) => ReactElement

type LinkProps<Match> = React.DetailedHTMLProps<
  React.AnchorHTMLAttributes<HTMLAnchorElement>,
  HTMLAnchorElement
> & {
  route: ReactRouteRecord<Match>;
} & ({} extends Match ? { match?: Match } : { match: Match });

The Link component renders an <a> element that, on clicked, changes the current location in the same manner as useNavigate.

It takes a destination route record as the route prop. If that route record requires a match object, it should be passed as the match prop.

The Link component accepts any props accepted by <a>. You do not need to specify the href prop as it is calculated by the Link component.

Example

const toplevelRoutes = Rocon.Path()
  .routes({
    foo: {
      action: () => <FooPage />
    },
    bar: {
      action: () => <BarPage />
    },
  });

const FooPage: React.FC = () => {
  const navigate = useNavigate();
  return (
    <Link route={toplevelRoutes._.bar}>
      Go to bar
    </Link>
  );
};

const BarPage: React.FC = () => {
  return (<p>This is bar</p>);
};

Example 2

const toplevelRoutes = Rocon.Path()
  .routes({
    foo: {
      action: () => <FooPage />
    },
    bar: {}
  });
// /bar requires 'key' in match object
const barRoute = toplevelRoutes._.bar
  .attach(Rocon.Search("key"))
  .action(({ key }) => <BarPage key={key} />);

const FooPage: React.FC = () => {
  const matchObject = useMemo(() => ({
    key: "value"
  }), []);

  return (
    <Link route={barRoute} match={matchObject}>
      Go to bar
    </Link>
  );
};

const BarPage: React.FC<{ key: string }> = ({ key }) => {
  return (<p>This is bar. key is {key}</p>);
};