distinguished-blush•2y 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.

6 Replies

kapa.ai•2y 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•2y 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•2y ago

<@248863890190893057> kapa.ai is still learning and improving, please let us how it did by reacting below

genetic-orange•2y 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.

distinguished-blushOP•2y ago

Thanks Alican, you and kapa.ai gave me the same answer and it will be useful for me.

genetic-orange•2y ago

👍🏻 kappa is awesome 😄

Refine 4.x.x useLocation and parseTableParams

Did you find this page helpful?