Passing parameters to useGo

How can I pass parameters to useGo such that the component it routes to can then reference them?

2 Replies

Hi @MesbearizingMeat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can pass parameters to the useGo hook in Refine by using the to, query, and hash parameters. The to parameter is the path you want to navigate to. If left empty, it will navigate to the current path, which is useful for updating the query parameters. You can also pass a resource object to the to parameter. The routerProvider will convert the resource object to the path. The resource object should have the following shape:

type ToWithResource = {  
 resource: string; // resource name or identifier  
 id?: BaseKey; // required when `action` is `"edit"`, `"show"`, or `"clone"`.  
 action: "list" | "create" | "edit" | "show" | "clone"; // action name  
 meta?: Record<string, unknown>; // meta data to be used when composing the path (use if you have additional path parameters)  
};

type ToWithResource = {  
 resource: string; // resource name or identifier  
 id?: BaseKey; // required when `action` is `"edit"`, `"show"`, or `"clone"`.  
 action: "list" | "create" | "edit" | "show" | "clone"; // action name  
 meta?: Record<string, unknown>; // meta data to be used when composing the path (use if you have additional path parameters)  
};

Here is an example of how to use useGo with a resource object:

import { useGo } from "@refinedev/core";  
  
const MyComponent = () => {  
 const go = useGo();  
  
 return (  
 <Button  
 onClick={() => {  
 go({  
 to: {  
 resource: "posts", // resource name or identifier  
 action: "edit",  
 id: "1",  
 }  
 query: {  
 foo: "bar",  
 },  
 type: "push",  
 });  
 }}  
 >  
 Go Posts With Default Filters  
 </Button>  
 );  
};

import { useGo } from "@refinedev/core";  
  
const MyComponent = () => {  
 const go = useGo();  
  
 return (  
 <Button  
 onClick={() => {  
 go({  
 to: {  
 resource: "posts", // resource name or identifier  
 action: "edit",  
 id: "1",  
 }  
 query: {  
 foo: "bar",  
 },  
 type: "push",  
 });  
 }}  
 >  
 Go Posts With Default Filters  
 </Button>  
 );  
};

The query parameter is the query parameters you want to add to the path. It is an object which the routerProvider will convert to the query string. The hash parameter is the hash you want to add to the path. Once you navigate to the new route, you can use the useParams hook in the component rendered by the matching route to retrieve the parameters. For example, if you have a posts resource and you want to create a route for the show action of a specific post, you can define the show action as /posts/show/:id and use the id parameter in your component. For more information, you can refer to the useGo documentation (https://refine.dev/docs/routing/hooks/use-go) and the useParams documentation (https://refine.dev/blog/react-router-useparams#how-to-use-the-useparams-hook). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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