extended-salmon•3mo ago

navigate to show with custom params

import { useNavigation } from "@refinedev/core"; const { show } = useNavigation(); how can i go to resource members with id of 5 and param of activeTab 4

6 Replies

kapa.ai•3mo ago

Hi @flankieflew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To navigate to the show page of the "members" resource with an ID of 5 and a custom parameter "activeTab" with a value of 4, you can use the show method from useNavigation hook as follows:

import { useNavigation } from "@refinedev/core";

const { show } = useNavigation();

// Navigate to members show page with id 5 and activeTab 4
show("members", "5", undefined, { activeTab: "4" });

import { useNavigation } from "@refinedev/core";

const { show } = useNavigation();

// Navigate to members show page with id 5 and activeTab 4
show("members", "5", undefined, { activeTab: "4" });

The show method accepts four parameters: 1. Resource name ("members") 2. Record ID ("5") 3. Type of navigation (undefined in this case, which defaults to "push") 4. Meta object for additional parameters ({ activeTab: "4" }) This will navigate to the show page of the "members" resource with the ID 5, and the custom parameter "activeTab" set to 4. The custom parameter will be added to the URL as a query parameter. It's worth noting that you can access this custom parameter in the target component using the appropriate method from your router provider. For more information on the useNavigation hook and its methods, you can refer to the useNavigation documentation (https://refine.dev/docs/routing/hooks/use-navigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

foreign-sapphire•3mo ago

Hello @flankieflew you can use useGo

import {
  useGo,
} from "@refinedev/core";

  const go = useGo();

  <Button
        onClick={() =>
          go({
            to: {
              resource: "posts",
              id: 5,
              action: "show",
            },
            query: {
              activeTab: 5,
            },
          })
        }
      >
        Show
      </Button>

import {
  useGo,
} from "@refinedev/core";

  const go = useGo();

  <Button
        onClick={() =>
          go({
            to: {
              resource: "posts",
              id: 5,
              action: "show",
            },
            query: {
              activeTab: 5,
            },
          })
        }
      >
        Show
      </Button>

this will be navigate to http://localhost:5173/posts/show/5?activeTab=5

extended-salmonOP•3mo ago

thanks, yep that worked! although I was curious as to where i can find more example usages of the meta property, it seems to be mostly focused on usage for the DataProvider as opposed to transporting properties between pages/components

foreign-sapphire•3mo ago

Yes, you're right, that's basically it. We generally use it for sending additional information to providers or components or hooks

extended-salmonOP•3mo ago

gotcha, thanks for being responsive @Alican Erdurmaz 🙂 giving this community positive vibes 😉

navigate to show with custom params

Did you find this page helpful?