The useNavigation hook provides navigation methods for CRUD operations. It simplifies navigation by automatically resolving resource routes.
This is an internal hook. For custom navigation, use useGo instead. Usage
import { useNavigation } from "@refinedev/core";
const { list, create, edit, show, clone } = useNavigation();
Return Values
The hook returns an object with navigation methods and URL generators:
Navigate to the create page of a resource.
Navigate to the edit page of a resource.
Navigate to the show page of a resource.
Navigate to the clone page of a resource.
Navigate to the list page of a resource.
Generate URL for the create page without navigating.Returns string
Generate URL for the edit page without navigating.Returns string
Generate URL for the show page without navigating.Returns string
Generate URL for the clone page without navigating.Returns string
Generate URL for the list page without navigating.Returns string
Examples
Basic Navigation
import { useNavigation } from "@refinedev/core";
const MyComponent = () => {
const { list, edit, show, create } = useNavigation();
return (
<div>
<button onClick={() => list("posts")}>Go to Posts</button>
<button onClick={() => create("posts")}>Create Post</button>
<button onClick={() => edit("posts", "1")}>Edit Post 1</button>
<button onClick={() => show("posts", "1")}>Show Post 1</button>
</div>
);
};
Using Replace Navigation
import { useNavigation } from "@refinedev/core";
const MyComponent = () => {
const { edit } = useNavigation();
const handleEdit = () => {
// Replace current history entry instead of pushing new one
edit("posts", "1", "replace");
};
return <button onClick={handleEdit}>Edit Post</button>;
};
Generating URLs
import { useNavigation } from "@refinedev/core";
const MyComponent = () => {
const { editUrl, showUrl } = useNavigation();
const editLink = editUrl("posts", "1");
const showLink = showUrl("posts", "1");
return (
<div>
<a href={editLink}>Edit Post</a>
<a href={showLink}>View Post</a>
</div>
);
};
import { useNavigation } from "@refinedev/core";
const MyComponent = () => {
const { edit } = useNavigation();
const handleEdit = () => {
edit(
"posts",
"1",
"push",
{
query: {
tab: "comments",
sort: "date"
}
}
);
};
return <button onClick={handleEdit}>Edit Post</button>;
};
Type Definitions
type HistoryType = "push" | "replace";
type MetaQuery = {
query?: Record<string, unknown>;
[key: string]: any;
};
interface IResourceItem {
name: string;
identifier?: string;
meta?: Record<string, unknown>;
}
type BaseKey = string | number;
See Also
- useGo - Low-level navigation hook
- useParse - Parse current route information