Skip to main content

​
useNavigation

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

​
Return Value

​
navigate
​
navigateToSignIn
​
navigateToAccountSelection
​
navigateToSignUp

​
Examples

import { useNavigation } from "@wacht/react-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>
  );
}

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

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

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

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