Skip to main content

​
useNavigationType

Returns the current navigation action which describes how the router came to the current location, either by a pop, push, or replace on the history stack. 
import { useNavigationType } from "react-router";

function SomeComponent() {
  const navigationType = useNavigationType();
  // "POP" | "PUSH" | "REPLACE"
}

​
Return Value

​
navigationType
"POP" | "PUSH" | "REPLACE"
The current navigation type:
  • "POP" - The user navigated using the browser back/forward buttons
  • "PUSH" - A new entry was added to the history stack (e.g., via a link click or navigate())
  • "REPLACE" - The current entry in the history stack was replaced (e.g., via navigate("/path", { replace: true }))

​
Type Declaration

declare function useNavigationType(): NavigationType;

type NavigationType = "POP" | "PUSH" | "REPLACE";

​
Usage Examples

​
Track Navigation Method

import { useNavigationType, useLocation } from "react-router";
import { useEffect } from "react";

function AnalyticsTracker() {
  const navigationType = useNavigationType();
  const location = useLocation();

  useEffect(() => {
    // Send analytics based on how user navigated
    analytics.track("pageview", {
      path: location.pathname,
      navigationType,
    });
  }, [location, navigationType]);

  return null;
}

​
Conditional Behavior Based on Navigation Type

import { useNavigationType } from "react-router";
import { useEffect } from "react";

function MyComponent() {
  const navigationType = useNavigationType();

  useEffect(() => {
    // Only scroll to top on PUSH navigations,
    // preserve scroll position on POP (back/forward)
    if (navigationType === "PUSH") {
      window.scrollTo(0, 0);
    }
  }, [navigationType]);

  return <div>{/* ... */}</div>;
}

​
Differentiate Fresh Navigation from History Navigation

import { useNavigationType } from "react-router";

function Article() {
  const navigationType = useNavigationType();
  const isBackNavigation = navigationType === "POP";

  return (
    <article>
      {isBackNavigation && (
        <p className="notice">Welcome back! You were reading this article.</p>
      )}
      {/* Article content */}
    </article>
  );
}

​
Common Patterns

​
Combining with useLocation

import { useNavigationType, useLocation } from "react-router";
import { useEffect } from "react";

function App() {
  const navigationType = useNavigationType();
  const location = useLocation();

  useEffect(() => {
    if (navigationType === "POP") {
      console.log("User used back/forward button");
    } else if (navigationType === "PUSH") {
      console.log("User navigated to a new page");
    } else if (navigationType === "REPLACE") {
      console.log("Current page was replaced");
    }
  }, [location, navigationType]);

  return <div>{/* ... */}</div>;
}

​
Notes

  • The navigation type is derived from the browser’s history API
  • This hook must be used within a <Router> component
  • The navigation type is available in all React Router modes (Declarative, Data, and Framework)
  • Initial page loads typically have a navigation type of "POP"
  • useLocation - Get the current location
  • useNavigate - Navigate programmatically
  • Link - Declarative navigation (creates PUSH navigations by default)

Build docs developers (and LLMs) love

Get started for freeTalk to us