Skip to main content

​
<NavigateToSignUp />

The <NavigateToSignUp /> component is a functional utility designed exclusively for routing. Instead of generating DOM nodes or user interface elements, the exact moment it mounts into your React application it orchestrates an immediate, client-side redirect. This securely routes the user straight to the Sign Up page designated in your deployment settings.

​
Import

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

​
Usage

This component is primarily utilized to shuttle inbound, unauthenticated organic traffic away from application boundaries and directly into your onboarding registration funnel. 
import { NavigateToSignUp, useSession } from "@wacht/react-router";

// E.g. A user organically navigates to a promotional landing page URL
// for a free tool that actually requires an account to function.
export default function FreeToolGate() {
  const { loading, session } = useSession();

  if (loading) return null;

  // If they aren't logged in, redirect them immediately to register.
  // We use the component instead of imperative router hooks to ensure
  // the transition happens deterministically during the render phase.
  if (!session) {
    return <NavigateToSignUp />;
  }

  return (
    <div>
      <h1>Advanced Metric Analyzer</h1>
      {/* Tool UI... */}
    </div>
  );
}