How to Use useNavigation in Remix for Navigation Control

In Remix, use the useNavigation hook to get the current navigation state like loading or idle. It helps you show UI feedback during page transitions by returning an object with navigation details.

Syntax

The useNavigation hook is imported from @remix-run/react and returns an object describing the current navigation state.

Key parts of the returned object include:

• state: a string showing navigation status, e.g., idle, loading, or submitting.
• location: the target location during navigation.
• formMethod: HTTP method if a form is submitting.

javascript

import { useNavigation } from '@remix-run/react';

function MyComponent() {
  const navigation = useNavigation();

  // navigation.state can be 'idle', 'loading', or 'submitting'
  // navigation.location is the destination URL
  // navigation.formMethod is the HTTP method if submitting a form

  return null;
}

Example

This example shows how to use useNavigation to display a loading message while navigating between pages.

javascript

import { useNavigation, Link } from '@remix-run/react';

export default function NavigationExample() {
  const navigation = useNavigation();

  return (
    <div>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      {navigation.state === 'loading' && <p>Loading page...</p>}
      {navigation.state === 'submitting' && <p>Submitting form...</p>}
      {navigation.state === 'idle' && <p>Ready.</p>}
    </div>
  );
}

Output

<nav>Home | About</nav>
<p>Ready.</p> (initially)

When clicking a link, it shows:
<p>Loading page...</p>

Common Pitfalls

Common mistakes when using useNavigation include:

• Not checking navigation.state properly, causing UI to not update during navigation.
• Assuming navigation is always loading on link clicks; it can be idle if no navigation is happening.
• Using useNavigation outside of Remix routes or components, which will cause errors.

javascript

import { useNavigation } from '@remix-run/react';

function WrongUsage() {
  const navigation = useNavigation();

  // Wrong: Checking navigation.state as boolean
  if (navigation.state) {
    return <p>Loading...</p>;
  }

  return <p>Idle</p>;
}

// Correct way:
function RightUsage() {
  const navigation = useNavigation();

  if (navigation.state === 'loading' || navigation.state === 'submitting') {
    return <p>Loading or submitting...</p>;
  }

  return <p>Idle</p>;
}

Quick Reference

useNavigation Hook Cheat Sheet:

Property	Description	Example Values
state	Current navigation status	'idle', 'loading', 'submitting'
location	Target location object during navigation	{ pathname: '/about' }
formMethod	HTTP method if a form is submitting	'post', 'get', null
formAction	URL where the form is submitting	'/submit-form' or null

Key Takeaways

Use useNavigation to track navigation state like loading or submitting in Remix.

Check navigation.state explicitly for 'idle', 'loading', or 'submitting' to update UI correctly.

Do not use useNavigation outside Remix route components to avoid errors.

Show user feedback during navigation by conditionally rendering based on navigation.state.

The hook returns useful info like target location and form method during navigation.