Remix

useNavigate

Use `useNavigate` hook

To trigger the progress bar when navigating with useNavigate, you need to use the useNavigate hook in @bprogress/remix, which wraps the remix hook by adding the progress bar.

Import

import { useNavigate } from '@bprogress/remix';

Usage

See the Remix useNavigate hook documentation for more information.

const navigate = useNavigate();

Options

useNavigate(options?: NavigateProgressOptions): ProgressNavigateFunction
NameTypeDefaultDescription
showProgressbooleantrueShow the progress bar.
startPositionnumberundefinedThe start position of the progress bar.
disableSameURLbooleantrueDisable the progress bar when the URL is the same.
delaynumberundefinedThe delay before the progress bar starts.
stopDelaynumberundefinedThe delay before the progress bar stops.
customNavigate() => NavigateFunctionundefinedA custom navigate instance.
interface NavigateProgressOptions {
  showProgress?: boolean;
  startPosition?: number;
  disableSameURL?: boolean;
  delay?: number;
  stopDelay?: number;
  customNavigate?: () => NavigateFunction;
}

Note

By default, if you do not specify any options when using navigate, the options defined during the initialization of the useNavigate hook will be applied. However, if you provide specific options when using navigate, these will take precedence and override the default options set in the hook.

Use navigate

Usage

delta

navigate(1);
navigate(-1, { startPosition: 0.3 });

to

navigate('/about');
navigate('/dashboard', { replace: true }, { startPosition: 0.3 });

Types

ProgressNavigateFunction

interface ProgressNavigateFunction {
  (
    to: To,
    options?: NavigateOptions,
    progressOptions?: NavigateActionsProgressOptions,
  ): void;
  (delta: number, progressOptions?: NavigateActionsProgressOptions): void;
}

Previous

useProgress

Next

Disable progress

On this page