Skip to main content

Navigation

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 "@tata1mg/router";

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 "@tata1mg/router";

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();
};