useNavigation

Navigate between authentication pages and routes.

useNavigation

The useNavigation hook provides navigation utilities for moving between authentication pages and other routes.

Return Value

navigate

Show Navigate to any path

to · string

The path to navigate to

options · NavigateOptions

Optional navigation options

returns · void

No return value

navigateToSignIn

Show Navigate to the sign-in page

redirectUri · string

Optional URI to redirect to after sign-in

returns · void

No return value

navigateToAccountSelection

Show Navigate to the account selection page

redirectUri · string

Optional URI to redirect to after account selection

returns · void

No return value

navigateToSignUp

Show Navigate to the sign-up page

redirectUri · string

Optional URI to redirect to after sign-up

returns · void

No return value

Examples

Custom Navigation Component

import { useNavigation } from "@wacht/tanstack-router";

function CustomNav() {
  const { navigate } = useNavigation();

  return (
    <nav>
      <a onClick={() => navigate("/")}>Home</a>
      <a onClick={() => navigate("/dashboard")}>Dashboard</a>
      <a onClick={() => navigate("/settings")}>Settings</a>
    </nav>
  );
}

Protected Page with Redirect

import { useNavigation } from "@wacht/tanstack-router";

function ProtectedPage() {
  const { navigateToSignIn } = useNavigation();

  if (!isAuthenticated) {
    navigateToSignIn(window.location.pathname);
  }

  return <div>Protected content</div>;
}

Related

• NavigateToSignIn - Component for navigation
• NavigateToSignUp - Component for navigation