Skip to main content
Version: 3.xx.xx

useNavigation

refine uses routerProvider and comes with all redirects out of the box. It allows you to manage your routing operations in refine. Using this hook, you can manage all the routing operations of your application very easily.

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

const { create, edit, clone, show, list, push, replace, goBack } = useNavigation();
tip

useNavigation uses the useHistory of the routerProvider.

Usage

We will make a button for each method to use.

List

Let's imagine that we have a post list and we want to be redirected to this page. To do this we will use the list hook.

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

export const MyListButton = () => {
const { list } = useNavigation();

return (
<button
onClick={(): void =>
list("posts")
}
>
Navigate to Post List Page
</button>
);
};

Create

If we want to go to the post creation page to create a new post, we can use the create hook.

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

export const MyCreateButton = () => {
const { create } = useNavigation();

return (
<button
onClick={(): void =>
create("posts")
}
>
Navigate to Create Page
</button>
);
};

Edit

Let's see what we should do if we want to go to the editing page of one of our posts.

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

export const MyEditButton = () => {
const { edit } = useNavigation();

return (
<button
onClick={(): void =>
edit("posts", "1")
}
>
Navigate to Edit Page
</button>
);
};

We used the edit to navigate to the post edit page, but you can see the differences in using it. edit requires the id property from us and clicking the button will trigger the edit method of useNavigation and then redirect the app to /posts/edit/1

Attention

There is something we should pay attention to here. We need to give the id of which post we want to edit.

tip

You can also give a type property to the methods. You can look here to see the properties.

Show

If you want to show the detail of your posts you can use show and you need id for show.

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

export const MyShowButton = () => {
const { show } = useNavigation();

return (
<button
onClick={(): void =>
show("posts", "1")
}
>
Navigate to Show Page
</button>
);
};
Attention

There is something we should pay attention to here. We need to give the id of which post we want to show.

tip

If you want to return to previous page. You can use goBack hook.

Clone

If we have the resources to clone a post and we want to go to this page, we will use clone with a record id.

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

export const MyCloneButton = () => {
const { clone } = useNavigation();

return (
<button
onClick={(): void =>
clone("posts", "1")
}
>
Navigate to Clone Page
</button>
);
};
Attention

There is something we should pay attention to here. We need to give the id of which post we want to clone.

Push, Replace and GoBack

If we do not want to use the above methods and want to redirect ourselves, we should use push or replace methods and also we can use goBack to return to previous page. You can check out the differences between them here.

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

export const MyHistoryButtons = () => {
const { push, replace, goBack } = useNavigation();

return (
<>
<button
onClick={(): void =>
push("posts")
}
>
Push to posts Page
</button>
<button
onClick={(): void =>
replace("posts")
}
>
Replaces to posts Page
</button>
<button
onClick={(): void =>
goBack()
}
>
Go back to previous Page
</button>
</>
);
};

API Reference

Properties

PropertyDescriptionTypeDefault
resource
Required
Redirect the app to the given resource namestring
typeIt is routerProvider history typesHistoryType"push"
idIt is used to append to the end of the pathstring

Return values

PropertyDescriptionType
createNavigate to create page of your resource(resource: string, type: HistoryType ) => void
listNavigate to list page of your resource(resource: string, type: HistoryType ) => void
editNavigate to edit page of your resource(resource: string, type: HistoryType , id: string) => void
cloneNavigate to clone page of your resource(resource: string, type: HistoryType , id: string) => void
showNavigate to show page of your resource(resource: string, type: HistoryType , id: string) => void
pushPushes a new entry onto the history stack(path: string, state?: unknown ) => void
replaceReplaces the current entry on the history stack(path: string, state?: unknown ) => void
goBackEquivalent to go previous stack() => void

Interface

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