rising-crimson

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 like:

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

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

3 Replies

fair-rose•15mo ago

yes use navigate https://tanstack.com/router/latest/docs/framework/react/guide/search-params#usenavigate-navigate-search-

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

fair-rose•15mo ago

but with to="."

rising-crimsonOP•15mo ago

ahh, cool

Gaming

Programming

apply/set search param in component.

Did you find this page helpful?