useNavigation

useNavigation is a hook that provides methods to navigate the app. Internally, it uses the go method of the routerProvider.

This hook is a legacy hook and is not recommended, despite not being deprecated. You should use your router libraries' hooks and methods instead when dealing with the custom navigations.

If you're in need of a navigation hook to use to navigate between your actions and resources, we recommend using the useGo and useGetToPath hooks.

import { useNavigation } from "@refinedev/core";

const {
    list,
    create,
    edit,
    show,
    clone,
    push,
    replace,
    goBack,
    listUrl,
    createUrl,
    editUrl,
    showUrl,
    cloneUrl,
} = useNavigation();

Return Values​

list​

This method navigates to the list page of the given resource.

import { useNavigation } from "@refinedev/core";

const { list } = useNavigation();

list("posts"); // It navigates to the `/posts` page

You can also give a type property as a second parameter to the list method.

create​

This method navigates to the create page of the given resource.

import { useNavigation } from "@refinedev/core";

const { create } = useNavigation();

create("posts"); // It navigates to the `/posts/create` page

You can also give a type property as a second parameter to the create method.

edit​

This method navigates to the edit page of the given resource and id. When you use this method, you need to give it the id of the record you want to edit.

import { useNavigation } from "@refinedev/core";

const { edit } = useNavigation();

edit("posts", "1"); // It navigates to the `/posts/edit/1` page

You can also give a type property as a third parameter to the edit method.

show​

This method navigates to the show page of the given resource and id. When you use this method, you need to give the id of the record you want to show.

import { useNavigation } from "@refinedev/core";

const { show } = useNavigation();

show("posts", "1"); // It navigates to the `/posts/show/1` page

You can also give a type property as a third parameter to the show method.

clone​

This method navigates to the clone page of the given resource and id. When you use this method, you need to give the id of the record you want to clone.

import { useNavigation } from "@refinedev/core";

const { clone } = useNavigation();

clone("posts", "1"); // It navigates to the `/posts/clone/1` page

You can also give a type property as a third parameter to the clone method.

push​

This method pushes a new entry onto the history stack. It uses the push method of the useHistory from the routerProvider.

import { useNavigation } from "@refinedev/core";

const { push } = useNavigation();

push("custom-page"); // It navigates to the `/custom-page` page

push method parameters are dependent on your router provider.

replace​

This method replaces the current entry on the history stack. It uses the replace method of the useHistory from the routerProvider.

import { useNavigation } from "@refinedev/core";

const { replace } = useNavigation();

replace("custom-page"); // It navigates to the `/custom-page` page

replace method parameters are dependent on your router provider.

goBack​

This method navigates to the previous page. It uses the goBack method of the useHistory from the routerProvider.

import { useNavigation } from "@refinedev/core";

const { goBack } = useNavigation();

goBack(); // It navigates to the previous page

goBack method parameters are dependent on your router provider.

listUrl​

This method returns the list page URL of the given resource.

import { useNavigation } from "@refinedev/core";

const { listUrl } = useNavigation();

listUrl("posts"); // It returns the `/posts` URL

createUrl​

This method returns the create page URL of the given resource.

import { useNavigation } from "@refinedev/core";

const { createUrl } = useNavigation();

createUrl("posts"); // It returns the `/posts/create` URL

editUrl​

This method returns the edit page URL of the given resource and id.

import { useNavigation } from "@refinedev/core";

const { editUrl } = useNavigation();

editUrl("posts", "1"); // It returns the `/posts/edit/1` URL

showUrl​

This method returns the show page URL of the given resource and id.

import { useNavigation } from "@refinedev/core";

const { showUrl } = useNavigation();

showUrl("posts", "1"); // It returns the `/posts/show/1` URL

cloneUrl​

This method returns the clone page URL of the given resource and id.

import { useNavigation } from "@refinedev/core";

const { cloneUrl } = useNavigation();

cloneUrl("posts", "1"); // It returns the `/posts/clone/1` URL

API Reference​

Return values​

Interface​

export type HistoryType = "push" | "replace";