T
TanStack•4mo ago
stormy-gold

Navigation blocking but ignoring search parameter changes

I have a form that initializes based on a query parameter (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
  />
1 Reply
stormy-gold
stormy-goldOP•4mo ago
Well, that was silly. It's current.pathname === next.pathname

Did you find this page helpful?