Navigation blocking but ignoring search parameter changes

I have a form that initializes based on a query parameter (

type: string

type: string

).

Inside the form, the user may change the 'preset' type in case they initially chose the wrong one.
To support copying the link and sharing it with others, I wish to then update the query parameters with the form as the source of truth.

However, since the search parameters change, the navigation blocker then kicks in and requests if I truly want to leave the page.
I'd preferably turn that off and only rely on the path and parameters, but I'm not sure how I can do that loosely.

<Block
  shouldBlockFn={({ current, next }) => {
    if (!showPrompt) {
      return false;
    }
    
    // this ignores path parameter changes, right? How can I refactor this to
    // block any path change except for search changes?
    if (!props.blockOnQueryChange && current.fullPath === next.fullPath) {
      return false;
    }

    const shouldLeave = window.confirm(pg.t('general.unsavedChangesPrompt'));
    return !shouldLeave;
  }}
  withResolver
  />

<Block
  shouldBlockFn={({ current, next }) => {
    if (!showPrompt) {
      return false;
    }
    
    // this ignores path parameter changes, right? How can I refactor this to
    // block any path change except for search changes?
    if (!props.blockOnQueryChange && current.fullPath === next.fullPath) {
      return false;
    }

    const shouldLeave = window.confirm(pg.t('general.unsavedChangesPrompt'));
    return !shouldLeave;
  }}
  withResolver
  />

TanStack•10mo ago•

1 reply

primary-violet

Navigation blocking but ignoring search parameter changes

I have a form that initializes based on a query parameter (

type: string

type: string

<Block
  shouldBlockFn={({ current, next }) => {
    if (!showPrompt) {
      return false;
    }
    
    // this ignores path parameter changes, right? How can I refactor this to
    // block any path change except for search changes?
    if (!props.blockOnQueryChange && current.fullPath === next.fullPath) {
      return false;
    }

    const shouldLeave = window.confirm(pg.t('general.unsavedChangesPrompt'));
    return !shouldLeave;
  }}
  withResolver
  />

<Block
  shouldBlockFn={({ current, next }) => {
    if (!showPrompt) {
      return false;
    }
    
    // this ignores path parameter changes, right? How can I refactor this to
    // block any path change except for search changes?
    if (!props.blockOnQueryChange && current.fullPath === next.fullPath) {
      return false;
    }

    const shouldLeave = window.confirm(pg.t('general.unsavedChangesPrompt'));
    return !shouldLeave;
  }}
  withResolver
  />

Navigation blocking but ignoring search parameter changes

Similar Threads

Navigation blocking but ignoring search parameter changes

Similar Threads

Similar Threads

Similar Threads