is there a way to access "location_the_ user_is_trying_to_go_to" with Prompt or usePrompt?

[Jared-Dahlke]

anybody know how to do the equivalent of this ? You can do it in react-router v5, here is a screenshot of their docs.
that "location" is where the user is trying to go

I've converted my whole app to use RL, and this is the last thing I have to figure out before raising the PR. Or maybe there is some other way to accomplish this using RL that I don't know about? Ideas or suggestions appreciated

[vcarel]

TL;DR, you may use this hook:

import { Location } from "history"

export const usePromptWithNextLocation = (
  message: string,
  when: boolean | ((location: Location) => boolean)
) => {
  const location = useLocation()

  useEffect(() => {
    if (!when) return

    const unblock = location.history.block(transition => {
      if ((typeof when === "function" && !when(transition.location)) || window.confirm(message)) {
        unblock()
        transition.retry()
      } else {
        location.current.pathname = window.location.pathname
      }
    })

    return unblock
  }, [when, location, message])
}

It is almost identical to usePrompt, except that the when property may now be a function.

To use it, for instance:

usePromptWithNextLocation(
  "There are unsaved changes, are you sure you want to leave?",
  location => hasPendingChanges && !location.pathname.includes("foobar")
)

I consider this hook as a work-around, because there is a annoying side-effect. Did you notice that, when you use usePrompt with a truthy condition, your browser would prompt you about possible unsaved change on refreshing page or closing tab? That's because of the location.history.block (I confess I don't know how it works).

Since the when function is called inside this block, you'll get that prompt all the time, even if the function would return false.

@tannerlinsley do you know how location.block works? I'm a bit lost in remix-run/history source code

[seedy]

For anyone stumbling upon this discussion, this code is outdated and unusable, sadly.