The useParsed hook returns the parsed information about the current route, including resource, action, and URL parameters.
Usage
import { useParsed } from "@refinedev/core";
const parsed = useParsed();
Return Value
Returns an object containing parsed route information.
resource
IResourceItem | undefined
The resource object for the current route.
Display label for the resource
Route path for the resource
The current action being performed: "list", "create", "edit", "show", or "clone".
The ID from the route (for edit, show, and clone actions).
Parsed URL parameters from the route.
Type Parameters
TParams
Record<string, any>
default:"Record<string, any>"
Type definition for URL parameters.
Examples
Basic Usage
import { useParsed } from "@refinedev/core";
const MyComponent = () => {
const { resource, action, id } = useParsed();
return (
<div>
<p>Resource: {resource?.name}</p>
<p>Action: {action}</p>
<p>ID: {id}</p>
</div>
);
};
Accessing URL Parameters
import { useParsed } from "@refinedev/core";
interface RouteParams {
tenant?: string;
filter?: string;
}
const MyComponent = () => {
const { params } = useParsed<RouteParams>();
return (
<div>
<p>Tenant: {params?.tenant}</p>
<p>Filter: {params?.filter}</p>
</div>
);
};
Conditional Rendering Based on Action
import { useParsed } from "@refinedev/core";
const PageHeader = () => {
const { action, resource } = useParsed();
const getTitle = () => {
switch (action) {
case "list":
return `${resource?.label} List`;
case "create":
return `Create ${resource?.label}`;
case "edit":
return `Edit ${resource?.label}`;
case "show":
return `${resource?.label} Details`;
default:
return resource?.label;
}
};
return <h1>{getTitle()}</h1>;
};
Using ID from Route
import { useParsed, useOne } from "@refinedev/core";
const EditPage = () => {
const { id, resource } = useParsed();
const { data, isLoading } = useOne({
resource: resource?.name ?? "",
id: id ?? "",
});
if (isLoading) return <div>Loading...</div>;
return (
<div>
<h1>Editing {resource?.label}: {id}</h1>
{/* Edit form */}
</div>
);
};
Breadcrumb Navigation
import { useParsed } from "@refinedev/core";
import { Link } from "react-router-dom";
const Breadcrumbs = () => {
const { resource, action, id } = useParsed();
return (
<nav>
<Link to="/">Home</Link>
{resource && (
<>
<span> / </span>
<Link to={`/${resource.name}`}>{resource.label}</Link>
</>
)}
{action && action !== "list" && (
<>
<span> / </span>
<span>{action}</span>
</>
)}
{id && (
<>
<span> / </span>
<span>{id}</span>
</>
)}
</nav>
);
};
Multi-tenant Application
import { useParsed } from "@refinedev/core";
interface TenantParams {
tenantId: string;
}
const TenantAwareComponent = () => {
const { params } = useParsed<TenantParams>();
const tenantId = params?.tenantId;
// Use tenantId for filtering data, etc.
return (
<div>
<p>Current Tenant: {tenantId}</p>
</div>
);
};
Dynamic Page Title
import { useParsed } from "@refinedev/core";
import { useEffect } from "react";
const usePageTitle = () => {
const { resource, action, id } = useParsed();
useEffect(() => {
let title = "App";
if (resource) {
title = resource.label || resource.name;
if (action === "create") {
title = `Create ${title}`;
} else if (action === "edit" && id) {
title = `Edit ${title} #${id}`;
} else if (action === "show" && id) {
title = `${title} #${id}`;
}
}
document.title = title;
}, [resource, action, id]);
};
Checking Current Location
import { useParsed } from "@refinedev/core";
const NavigationItem = ({ resourceName }: { resourceName: string }) => {
const { resource } = useParsed();
const isActive = resource?.name === resourceName;
return (
<a
href={`/${resourceName}`}
style={{
fontWeight: isActive ? "bold" : "normal",
color: isActive ? "blue" : "black"
}}
>
{resourceName}
</a>
);
};
Notes
- This hook is a wrapper around
useParse that memoizes the result
- The parsed information updates automatically when the route changes
- Useful for creating dynamic components that adapt to the current route
- The
params object contains all URL parameters parsed from the current route
See Also