sensitive-blue
sensitive-blue13mo ago

Refine 4.x.x useLocation and parseTableParams

Hi, I used to use useLocation and useRouterContext but now I upgraded refine and I don't want to use legacy codes. I can't find what code will be replaced as it. Could you help me with that? I want to read url params and parse it. I want to navigate resources edit and show pages automatically.
No description
6 Replies
kapa.ai
kapa.ai13mo ago
Hi @juncture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai13mo ago
---------------------- Hi, To read URL params and parse them, you can use the useParams hook provided by the router you're using (React Router v6 or Next.js). In refine, you can use the useResource hook to get the current resource information and the resources that are defined in <Refine/>. For navigating to resources' edit and show pages automatically, you can use the useGetToPath and useGo hooks from refine. The useGetToPath hook composes the URL for the given resource and the action by using the URL parameters and the meta property if provided. The useGo hook is used for navigating between pages. Here's an example of how to use these hooks:
import { useGetToPath, useGo } from "@refinedev/core";

const MyComponent = () => {
const getToPath = useGetToPath();
const go = useGo();

return (
<Button
onClick={() => {
go({
to: getToPath({
resource: "posts",
action: "edit",
meta: {
id: 1,
authorId: 2,
},
}),
});
}}
>
Go To Edit Post
</Button>
);
};
import { useGetToPath, useGo } from "@refinedev/core";

const MyComponent = () => {
const getToPath = useGetToPath();
const go = useGo();

return (
<Button
onClick={() => {
go({
to: getToPath({
resource: "posts",
action: "edit",
meta: {
id: 1,
authorId: 2,
},
}),
});
}}
>
Go To Edit Post
</Button>
);
};
For more information, refer to the useGetToPath (https://refine.dev/docs/api-reference/core/hooks/navigation/useGetToPath) and useGo (https://refine.dev/docs/api-reference/core/hooks/navigation/useGo) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useGetToPath | refine
useGetToPath is a hook that returns a function that composes the URL for the given resource and the action by using the URL parameters and the meta property if provided.
useGo | refine
useGo is a hook that leverages the go method of the routerProvider to perform navigation operations.
kapa.ai
kapa.ai13mo ago
<@248863890190893057> kapa.ai is still learning and improving, please let us how it did by reacting below
ambitious-aqua
ambitious-aqua13mo ago
you can use import { useParsed, } from "@refinedev/core"; instead of useParams https://refine.dev/docs/api-reference/core/hooks/navigation/useParsed/
useParsed | refine
useParsed is a hook that leverages the parse method of the routerProvider to access the URL and query parameters along with the inferred resource, action and id from the URL.
sensitive-blue
sensitive-blue13mo ago
Thanks Alican, you and kapa.ai gave me the same answer and it will be useful for me.
ambitious-aqua
ambitious-aqua13mo ago
👍🏻 kappa is awesome 😄