[v6] Check if you can go back

[robrechtme]

Hi

What is the recommended way to check if you can navigate(-1) in v6?
Say I want to implement a custom back button and disable it when you can't go back.

[Moshyfawn]

You can pass the previous route in a state

const { pathname } = useLocation()

return <Link to={{ pathname: '/page, state: { prevPage: location.pathname }}}>To Page</Link>

and check against it like

const { state } = useLocation()

return (
  <section>
    {!!state.prevPage && <BackButton ?>}
    <main>Content</main>
  </section>
)

[lili21]

what if there is replace navigate

[Moshyfawn]

If you navigate and replace the routing stack, you can just not pass the prevPage prop

[lili21]

I guess in a real world, there will be normal navigate and replace navigate both.
like I navigate to page B from page A (with state), and then navigate to page C from page B (without state - replace).

the <BackButton /> wouldn't be there.

[lili21]

I guess you need to store the navigation history in a stack, and check it by yourself.

// listen history change and store it
function useHistoryStack() {
  const [stack, setStack] = useState([]);
  const { pathname } = useLocation();
  const type = useNavigationType();
  useEffect(() => {
    if (type === "POP") {
      setStack(stack.slice(0, stack.length - 1));
    } else if (type === "PUSH") {
      setStack([...stack, pathname]);
    } else {
      setStack([...stack.slice(0, stack.length - 1), pathname]);
    }
  }, [pathname, type]);

  return stack;
}

and you can check the length of the stack

function Test() {
  const historyStack = useHistoryStack();

  return ({historyStack.length > 0 && (
        <button onClick={() => navigate("/")}>back</button>
      )})
}

[mateussiil]

This code is amazing, but I would do
a simple change

function useHistoryStack() {
  const [stack, setStack] = useState([]);
  const { pathname } = useLocation();
  const type = useNavigationType();

  useEffect(() => {
    if (type === "POP") {
      setStack(prev => prev.slice(0, prev.length - 1));
    } else if (type === "PUSH") {
      setStack(prev => [...prev, pathname]);
    } else {
      setStack(prev => [...prev.slice(0, prev.length - 1), pathname]);
    }
  }, [pathname, type]);

  return stack;
}

[edmundsj]

I ran into this just today - not having access to the prior navigation history turns out to be quite annoying for specifically this use case. navigate(-1) becomes unsafe to use because it's always possible that the user is accessing that page for the first time from within the app.

[FengHuangDong]

In V6, you can use const location = useLocation(); and check location.key === "default" to do something

[sohammondal]

For SSR it won't work. location.key === "default" for SSR apps.

[rmburg]

I feel like this is a use case that should be covered by react-router. Also, in addition to determining if the user can go back, what if I need to do the same for going forwards? How do the suggested solutions work in that case?

[bhallstein]

I feel like this is a use case that should be covered by react-router. Also, in addition to determining if the user can go back, what if I need to do the same for going forwards? How do the suggested solutions work in that case?

You're right, the solutions above do not work for forward navigation — POP can mean navigate(-1), but also navigate(+1) (as per the browser popstate event). The code above pops an item off the history stack when a forward navigate happens!

In our case, we were able to work around this with the following (really hacky but highly effective):

const stackRef = useRef({i: -1, items: []})
const popForward = useRef(false)

useEffectAfterMount(() => {
  let stack = stackRef.current
  if (type === 'POP') {
    const fwd = popForward.current
    fwd && (stack.i += 1)
    !fwd && (stack.i = Math.max(stack.i - 1, 0))
    popForward.current = false
  }
  else if (type === 'PUSH') {
    stack.i += 1
    stack.items.splice(stack.i, Infinity, pathname)
  }
  else if (type === 'REPLACE') {
    stack.items.pop()
    stack.items.push(pathname)
  }
}, [pathname, type])

const appBackFn = () => {
  navigate(-1)
}

const appForwardFn = () => {
  popForward.current = true
  navigate(1)
}

(Also with the addition of an index which enables fully tracking the history state in both directions, i.e. this makes it possible to disable a forward button when at last item in the stack.)

[Cerberus]

As I've tried on react-router-dom: 6.18.0 with createBrowserRouter. Seem like there is idx variable in history (Global variable) for go-back detection.

{
  ...,
  state: {
    "usr": null,
    "key": "default",
    "idx": 0
  }
}

Example for go-back function:

if (history.state.idx === 0) {
  console.log('Cannot go back')
} else {
  navigate(-1)
}

PS: Please use with caution (I just tested some cases).

[rmburg]

This ended up working for my use case, thanks!
In case anyone needs it, this is what I used for my go back / go forward buttons:

const canGoBack = window.history.state.idx !== 0;
const canGoForward = window.history.state.idx < window.history.length - 1;

<>
  <button disabled={!canGoBack}>go back</button>
  <button disabled={!canGoForward}>go forward</button>
</>

[abena07]

thanks! this helped me

[shura-v]

Seems odd for a property like idx to be tucked away in the browser's window.history.state object when you're working with a library like React Router