Skip to main content
Unlock powerful debugging and effortless query monitoring with Refine DevtoolsLearn More
RefineDocumentation
Version: 3.xx.xx

useNavigation

useNavigation is a hook that provides methods to navigate the app.

Internally, it uses the useHistory of the routerProvider.

import { useNavigation } from "@pankod/refine-core";

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

Return Values​

list​

It is a method that navigates to the list page of the given resource.

import { useNavigation } from "@pankod/refine-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​

It is a method that navigates to the create page of the given resource.

import { useNavigation } from "@pankod/refine-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​

It is a method that navigates to the edit page of the given resource and id. When you use this method, you need to give the id of the record you want to edit.

import { useNavigation } from "@pankod/refine-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​

It is a method that 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 "@pankod/refine-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​

It is a method that 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 "@pankod/refine-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​

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

import { useNavigation } from "@pankod/refine-core";

const { push } = useNavigation();

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

push method parameters are dependent on your router provider.

replace​

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

import { useNavigation } from "@pankod/refine-core";

const { replace } = useNavigation();

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

replace method parameters are dependent on your router provider.

goBack​

It is a method that navigates to the previous page. It uses the goBack method of the useHistory from the routerProvider.

import { useNavigation } from "@pankod/refine-core";

const { goBack } = useNavigation();

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

goBack method parameters are dependent on your router provider.

listUrl​

It is a method that returns the list page URL of the given resource.

import { useNavigation } from "@pankod/refine-core";

const { listUrl } = useNavigation();

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

createUrl​

It is a method that returns the create page URL of the given resource.

import { useNavigation } from "@pankod/refine-core";

const { createUrl } = useNavigation();

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

editUrl​

It is a method that returns the edit page URL of the given resource and id.

import { useNavigation } from "@pankod/refine-core";

const { editUrl } = useNavigation();

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

showUrl​

It is a method that returns the show page URL of the given resource and id.

import { useNavigation } from "@pankod/refine-core";

const { showUrl } = useNavigation();

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

cloneUrl​

It is a method that returns the clone page URL of the given resource and id.

import { useNavigation } from "@pankod/refine-core";

const { cloneUrl } = useNavigation();

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

API Reference​

Return values​

PropertyDescriptionType
listMethod that navigates to the list page( resource: string, type: HistoryType ) => void
createMethod that navigates to the create page( resource: string, type: HistoryType ) => void
editMethod that navigates to the edit page( resource: string, id: BaseKey, type: HistoryType ) => void
showMethod that navigates to the show page( resource: string, id: BaseKey, type: HistoryType ) => void
cloneMethod that navigates to the clone page( resource: string, id: BaseKey, type: HistoryType ) => void
pushMethod that pushes the given path to the history stack( path: string, ...rest: unknown[] ) => void
replaceMethod that replaces the current entry on the history stack( path: string, ...rest: unknown[] ) => void
goBackMethod that navigates to the previous page() => void
listUrlMethod that returns the list page URL( resource: string ) => string
createUrlMethod that returns the create page URL( resource: string ) => string
editUrlMethod that returns the edit page URL( resource: string, id: BaseKey ) => string
showUrlMethod that returns the show page URL( resource: string, id: BaseKey ) => string
cloneUrlMethod that returns the clone page URL( resource: string, id: BaseKey ) => string

Interface​

History Type
export type HistoryType = "push" | "replace";
Previous
useSubscription
Next
useNotification