useNavigate

React Router hook for programmatic navigation. Re-exported from react-router for convenience.

Signature

const useNavigate: () => (to: string | number, options?: NavigateOptions) => void;

Usage

Navigate to Path

import { useNavigate } from "@tailor-platform/app-shell";

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

  const goToProducts = () => {
    navigate("/products");
  };

  return <button onClick={goToProducts}>View Products</button>;
}

Navigate with Dynamic Parameters

function ProductCard({ id }: { id: string }) {
  const navigate = useNavigate();

  const viewDetails = () => {
    navigate(`/products/${id}`);
  };

  return <button onClick={viewDetails}>Details</button>;
}

Navigate Back

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

  return <button onClick={() => navigate(-1)}>Back</button>;
}

Navigate Forward

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

  return <button onClick={() => navigate(1)}>Forward</button>;
}

Replace Current Entry

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

  useEffect(() => {
    // Replace current history entry (user can't go back to login)
    navigate("/dashboard", { replace: true });
  }, []);

  return <div>Redirecting...</div>;
}

Navigate with State

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

  const selectProduct = (product: Product) => {
    navigate(`/products/${product.id}`, {
      state: { from: "list" },
    });
  };

  return <ProductList onSelect={selectProduct} />;
}

// Access state in target component
function ProductDetail() {
  const location = useLocation();
  const from = location.state?.from; // "list"
}

NavigateOptions

interface NavigateOptions {
  replace?: boolean; // Replace current entry instead of pushing
  state?: any; // Pass state to target route
  preventScrollReset?: boolean;
  relative?: "route" | "path";
}

Important Notes

Import from AppShell

Always import from @tailor-platform/app-shell, not react-router:

// ✅ Correct
import { useNavigate } from "@tailor-platform/app-shell";

// ❌ Wrong - won't work with AppShell's router
import { useNavigate } from "react-router";

This ensures you're using AppShell's router instance.

Related

• useParams - Access route parameters
• useLocation - Access current location
• Routing & Navigation - Navigation guide