sensitive-blue•6mo ago

How to navigate to a create page with searchparams?

I need to navigate to a create page with certain search parameters so that I can control the form values using that parameters. How can I achieve that?

11 Replies

kapa.ai•6mo ago

Hi @Dipesh Bajgain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the useGo hook provided by Refine. This hook supports query parameters which you can use to pass your search parameters. Here is an example of how you can use the useGo hook:

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

const go = useGo();

go("/create", { search: "?countryId=1" });

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

const go = useGo();

go("/create", { search: "?countryId=1" });

In the above example, useGo is used to navigate to the /create page with a search parameter of countryId=1. Once you are on the create page, you can use these search parameters to control the form values. You can use the useForm hook to manage your form state and the getInputProps method to bind your form fields to the form state. Here is an example of how you can use the useForm hook and getInputProps method:

import { useForm, Create } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";

const CreatePage = () => {  
  const { saveButtonProps, getInputProps } = useForm({  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });

  return (  
    <Create saveButtonProps={saveButtonProps}>
      <form>  
        <TextInput mt={8} label="Name" placeholder="Name" {...getInputProps("name")} />  
        <TextInput mt={8} label="Surname" placeholder="Surname" {...getInputProps("surname")} />  
      </form>  
    </Create>  
  );  
};

import { useForm, Create } from "@refinedev/mantine";  
import { TextInput } from "@mantine/core";

const CreatePage = () => {  
  const { saveButtonProps, getInputProps } = useForm({  
    initialValues: {  
      name: "",  
      surname: "",  
    },  
    transformValues: (values) => ({  
      fullName: `${values.name} ${values.surname}`,  
    }),  
  });

  return (  
    <Create saveButtonProps={saveButtonProps}>
      <form>  
        <TextInput mt={8} label="Name" placeholder="Name" {...getInputProps("name")} />  
        <TextInput mt={8} label="Surname" placeholder="Surname" {...getInputProps("surname")} />  
      </form>  
    </Create>  
  );  
};

In the above example, useForm is used to manage the form state and getInputProps is used to bind the form fields to the form state. For more information, you can refer to the following sources: - Github Issue (closed): [FEAT] Pass dynamic initialization data to create form (via CreateButton) (https://github.com/refinedev/refine/issues/5113) - Documentation > Docs > Guides-concepts > Forms > Server Side Validation Globally ConfigurableThis value can be configured globally. Click to see the guide for more information. > Code Files Part 22 (https://refine.dev/docs/guides-concepts/forms#server-side-validation-) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

sensitive-blue•6mo ago

@kapa.ai can I use useNavigate create to do the same as useGo?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useNavigate hook from React Router v6 to achieve similar functionality as the useGo hook from Refine. The useNavigate hook returns a function that you can use to navigate to different routes in your application. Here's an example of how you can use useNavigate to navigate to a create page with search parameters:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/create", { search: "?countryId=1" });

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/create", { search: "?countryId=1" });

In this example, useNavigate is used to navigate to the /create page with a search parameter of countryId=1. However, please note that while useNavigate and useGo provide similar functionality, they are not exactly the same. The useGo hook from Refine is designed to work with Refine's built-in router providers and provides a unified interface for navigation regardless of your routing solution. On the other hand, useNavigate is a hook from React Router v6 and is designed to work specifically with React Router. For more information, you can refer to the following sources: - Blog > Blog > Redirect in React Router V6 with useNavigate hook > Conclusion (https://refine.dev/blog/usenavigate-react-router-redirect#conclusion) - Documentation > Docs > Routing > Hooks > useGo (https://refine.dev/docs/routing/hooks/use-go) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

sensitive-blue•6mo ago

@kapa.ai I want to use useNavigation from @refinedev/core

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useNavigation hook from @refinedev/core provides methods to navigate the app. Here's an example of how you can use it:

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

const { list, create, edit, show, clone, push, replace, goBack, listUrl, createUrl, editUrl, showUrl, cloneUrl } = useNavigation();

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

const { list, create, edit, show, clone, push, replace, goBack, listUrl, createUrl, editUrl, showUrl, cloneUrl } = useNavigation();

In this example, useNavigation is used to get various navigation methods and URLs. However, please note that useNavigation is a legacy hook and is not recommended for use, despite not being deprecated. It's recommended to use your router libraries' hooks and methods instead when dealing with custom navigations. If you're in need of a navigation hook to use to navigate between your actions and resources, it's recommended to use the useGo and useGetToPath hooks. For more information, you can refer to the following sources: - Documentation > Docs > Routing > Hooks > useNavigation (https://refine.dev/docs/routing/hooks/use-navigation) - Documentation > Docs > Migration-guide > Migrating from 3.x.x to 4.x.x > @pankod/refine-core changes > useNavigation hook (https://refine.dev/docs/migration-guide/3x-to-4x#usenavigation-hook) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

sensitive-blue•6mo ago

@kapa.ai Object literal may only specify known properties, and 'search' does not exist in type 'NavigateOptions'.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're trying to use the navigate function from useNavigate hook with a search property in the options object. However, the NavigateOptions type does not have a search property, hence the error. In React Router v6, you can pass search parameters as part of the to parameter in the navigate function. Here's how you can do it:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/create?countryId=1");

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/create?countryId=1");

In this example, useNavigate is used to navigate to the /create page with a search parameter of countryId=1. For more information, you can refer to the React Router v6 documentation (https://reactrouter.com/docs/en/v6/api#usenavigate). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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