Navigation

The examples use the integrated router in Catalyst 0.3.x. For 0.2.x, keep the equivalent imports from @tata1mg/router until upgrading.

Catalyst uses React Router v6 for navigation. You can navigate using the Link component, useNavigate hook, or within fetcher functions.

Use Link for declarative navigation:

import { Link } from "catalyst-core";


function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/user/123">User Profile</Link>
    </nav>
  );
}

useNavigate Hook

Use useNavigate for programmatic navigation:

import { useNavigate } from "catalyst-core";


function LoginButton() {
  const navigate = useNavigate();


  const handleLogin = async () => {
    await performLogin();
    navigate("/dashboard");
  };


  return <button onClick={handleLogin}>Login</button>;
}

With State

navigate("/product/detail", {
  state: { fromPage: "product-list" }
});

Replace History

navigate("/login", { replace: true });

Both clientFetcher and serverFetcher receive a navigate function for redirects:

Client Fetcher

Home.clientFetcher = async ({ navigate }) => {
  const isAuthenticated = await checkAuth();


  if (!isAuthenticated) {
    navigate("/login");
    return;
  }


  return fetchData();
};

Server Fetcher

On the server, navigate triggers an HTTP redirect:

Home.serverFetcher = async ({ navigate }) => {
  const isAuthenticated = await checkServerAuth();


  if (!isAuthenticated) {
    navigate("/login");
    return;
  }


  return fetchServerData();
};