The useParse hook returns a function to parse the current route and extract information about the current resource, action, parameters, and more.
Usage
import { useParse } from "@refinedev/core";
const parse = useParse();
const parsed = parse();
Return Value
Returns a parse function that when called returns route information.
Parse Function
The parse function accepts an optional type parameter for custom params:
const parse = useParse();
const parsed = parse<{ customParam: string }>();
Parse Response
The parse function returns an object with the following properties:
The current resource item if the route matches a resource
The current action: "create", "edit", "list", "show", or "clone"
The record ID from the route (for edit, show, and clone actions)
Parsed parameters from the URLFilters extracted from query parameters
Sorters extracted from query parameters
Current page number from query parameters
Page size from query parameters
Examples
Basic Usage
import { useParse } from "@refinedev/core";
const MyComponent = () => {
const parse = useParse();
const { resource, action, id, pathname } = parse();
return (
<div>
<p>Resource: {resource?.name}</p>
<p>Action: {action}</p>
<p>ID: {id}</p>
<p>Pathname: {pathname}</p>
</div>
);
};
Using useParsed Hook
For convenience, you can use the useParsed hook which calls parse() automatically:
import { useParsed } from "@refinedev/core";
const MyComponent = () => {
const { resource, action, id, pathname, params } = useParsed();
return (
<div>
<p>Resource: {resource?.name}</p>
<p>Action: {action}</p>
<p>ID: {id}</p>
<p>Current Page: {params?.currentPage}</p>
<p>Page Size: {params?.pageSize}</p>
</div>
);
};
With Custom Params
import { useParse } from "@refinedev/core";
type CustomParams = {
tab: string;
mode: "light" | "dark";
};
const MyComponent = () => {
const parse = useParse();
const { params } = parse<CustomParams>();
return (
<div>
<p>Tab: {params?.tab}</p>
<p>Mode: {params?.mode}</p>
</div>
);
};
Accessing Filters and Sorters
import { useParsed } from "@refinedev/core";
const MyComponent = () => {
const { params } = useParsed();
return (
<div>
<h3>Filters:</h3>
<pre>{JSON.stringify(params?.filters, null, 2)}</pre>
<h3>Sorters:</h3>
<pre>{JSON.stringify(params?.sorters, null, 2)}</pre>
<h3>Pagination:</h3>
<p>Page: {params?.currentPage}</p>
<p>Page Size: {params?.pageSize}</p>
</div>
);
};
Conditional Rendering Based on Route
import { useParsed } from "@refinedev/core";
const MyComponent = () => {
const { resource, action, id } = useParsed();
if (resource?.name === "posts") {
if (action === "edit" && id) {
return <div>Editing post {id}</div>;
}
if (action === "create") {
return <div>Creating new post</div>;
}
if (action === "list") {
return <div>Listing all posts</div>;
}
}
return <div>Unknown route</div>;
};
Using Pathname for Custom Logic
import { useParsed } from "@refinedev/core";
const MyComponent = () => {
const { pathname } = useParsed();
const isPublicRoute = pathname?.startsWith("/public");
const isDashboard = pathname === "/dashboard";
return (
<div>
<p>Public Route: {isPublicRoute ? "Yes" : "No"}</p>
<p>Dashboard: {isDashboard ? "Yes" : "No"}</p>
</div>
);
};
Type Definitions
type ParseFunction<TParams extends Record<string, any> = Record<string, any>> =
() => ParseResponse<TParams>;
type ParseResponse<TParams extends Record<string, any> = Record<string, any>> = {
params?: ParsedParams<TParams>;
resource?: IResourceItem;
id?: BaseKey;
action?: Action;
pathname?: string;
};
type ParsedParams<TParams extends Record<string, any> = Record<string, any>> = {
filters?: CrudFilter[];
sorters?: CrudSort[];
currentPage?: number;
pageSize?: number;
} & TParams;
type BaseKey = string | number;
type Action = "create" | "edit" | "list" | "show" | "clone";
interface IResourceItem {
name: string;
identifier?: string;
meta?: Record<string, unknown>;
}
type CrudFilter = LogicalFilter | ConditionalFilter;
type CrudSort = {
field: string;
order: "asc" | "desc";
};
See Also