apply/set search param in component.

Hi,

How can i apply a param to my url when the page loads?
I'm using a system that generates a unique ID.
in their own examples they are doing something like.

const [searchParams, setSearchParams] = useSearchParams()

const createFlow = () => {
    sdk
      // create a new settings flow
      // the flow contains the form fields, error messages and csrf token
      // depending on the Ory Network project settings, the form fields returned may vary
      .createBrowserSettingsFlow()
      .then(({ data: flow }) => {
        // Update URI query params to include flow id
        setSearchParams({ ["flow"]: flow.id })
        // Set the flow data
        setFlow(flow)
      })
      .catch(sdkErrorHandler)
  }

const [searchParams, setSearchParams] = useSearchParams()

const createFlow = () => {
    sdk
      // create a new settings flow
      // the flow contains the form fields, error messages and csrf token
      // depending on the Ory Network project settings, the form fields returned may vary
      .createBrowserSettingsFlow()
      .then(({ data: flow }) => {
        // Update URI query params to include flow id
        setSearchParams({ ["flow"]: flow.id })
        // Set the flow data
        setFlow(flow)
      })
      .catch(sdkErrorHandler)
  }

is there something similar with Router or would I need to do a

navigate

navigate

like:

navigate({
            to: "",
            search: () => ({
              flow: flow.id
            })
          })

navigate({
            to: "",
            search: () => ({
              flow: flow.id
            })
          })

TanStack•2y ago•

3 replies

expected-olive

apply/set search param in component.

Hi,

How can i apply a param to my url when the page loads?
I'm using a system that generates a unique ID.
in their own examples they are doing something like.

const [searchParams, setSearchParams] = useSearchParams()

const createFlow = () => {
    sdk
      // create a new settings flow
      // the flow contains the form fields, error messages and csrf token
      // depending on the Ory Network project settings, the form fields returned may vary
      .createBrowserSettingsFlow()
      .then(({ data: flow }) => {
        // Update URI query params to include flow id
        setSearchParams({ ["flow"]: flow.id })
        // Set the flow data
        setFlow(flow)
      })
      .catch(sdkErrorHandler)
  }

const [searchParams, setSearchParams] = useSearchParams()

const createFlow = () => {
    sdk
      // create a new settings flow
      // the flow contains the form fields, error messages and csrf token
      // depending on the Ory Network project settings, the form fields returned may vary
      .createBrowserSettingsFlow()
      .then(({ data: flow }) => {
        // Update URI query params to include flow id
        setSearchParams({ ["flow"]: flow.id })
        // Set the flow data
        setFlow(flow)
      })
      .catch(sdkErrorHandler)
  }

is there something similar with Router or would I need to do a

navigate

navigate

like:

navigate({
            to: "",
            search: () => ({
              flow: flow.id
            })
          })

navigate({
            to: "",
            search: () => ({
              flow: flow.id
            })
          })

apply/set search param in component.

Similar Threads

apply/set search param in component.

Similar Threads

Similar Threads

Similar Threads