using go method how can I pass extra information to a page

5 Replies

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass extra information to a page using the go method in refine, you can utilize the query parameter. The query parameter allows you to add custom query parameters to the URL when navigating. Here's how you can do it:

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

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

  return (
    <Button
      onClick={() => {
        go({
          to: "/posts",
          query: {
            extraInfo: "someValue",
            anotherParam: "anotherValue"
          },
          type: "push",
        });
      }}
    >
      Go to Posts with Extra Info
    </Button>
  );
};

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

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

  return (
    <Button
      onClick={() => {
        go({
          to: "/posts",
          query: {
            extraInfo: "someValue",
            anotherParam: "anotherValue"
          },
          type: "push",
        });
      }}
    >
      Go to Posts with Extra Info
    </Button>
  );
};

In this example, when the button is clicked, it will navigate to the "/posts" page and add the query parameters extraInfo=someValue and anotherParam=anotherValue to the URL. You can pass any additional information you need through the query object. The routerProvider will convert this object into a query string in the URL. If you want to keep the existing query parameters while adding new ones, you can use the options.keepQuery parameter:

go({
  to: "/posts",
  query: {
    newParam: "newValue"
  },
  options: {
    keepQuery: true
  },
  type: "push",
});

go({
  to: "/posts",
  query: {
    newParam: "newValue"
  },
  options: {
    keepQuery: true
  },
  type: "push",
});

This will preserve the existing query parameters and add the new one. For more detailed information about the useGo hook and its parameters, you can refer to the useGo documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

mute-goldOP•5w ago

@kapa.ai and then on the page with the new query how do I parse the query?

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To parse the query parameters on the page you've navigated to using the go method, you can use the useParsed hook provided by refine. This hook allows you to access the URL and query parameters, along with other useful information. Here's how you can use it:

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

const MyComponent = () => {
  const {
    params,
    pathname,
    resource,
    action,
    id
  } = useParsed();

  // Access the query parameters
  const { extraInfo, anotherParam } = params;

  // Use the parsed query parameters
  console.log("Extra Info:", extraInfo);
  console.log("Another Param:", anotherParam);

  // Rest of your component logic
};

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

const MyComponent = () => {
  const {
    params,
    pathname,
    resource,
    action,
    id
  } = useParsed();

  // Access the query parameters
  const { extraInfo, anotherParam } = params;

  // Use the parsed query parameters
  console.log("Extra Info:", extraInfo);
  console.log("Another Param:", anotherParam);

  // Rest of your component logic
};

In this example, the useParsed hook returns an object containing various properties, including params. The params object contains all the parameters parsed from the URL, including both URL parameters and query parameters. You can destructure the specific query parameters you're interested in from the params object. In the example above, we're extracting extraInfo and anotherParam, which correspond to the query parameters we added in the previous go method call. For more detailed information about the useParsed hook and its return values, you can refer to the useParsed documentation. Remember that the availability and format of the query parameters depend on how you set them up in your go method call and your router configuration. Documentation > Docs > Routing > Hooks > useParsed ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

using go method how can I pass extra information to a page

Did you find this page helpful?