[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

[12joan]

One issue with this is window.history.length also counts history entries prior to React Router, whereas window.history.state.idx only counts navigations React Router knows about.

If a user clicks an external link from Site A to Site B (which uses React Router), and then clicks an internal link on Site B, then window.history.state.idx will be 1 but window.history.length will be 3, so canGoForward will be a false positive.

[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

[nicolas-chalet-wmx]

Doesn't work with a MemoryRouter either

[12joan]

One simple workaround if you're dealing with browser history is to use window.navigation.canGoBack and window.navigation.canGoForward. It's only supported in Chrome at the moment, but hopefully that will change soon. In the meantime, the custom back/forward buttons can gracefully degrade to always being enabled if the Navigation API isn't available.

declare global {
  interface Window {
    // https://developer.mozilla.org/en-US/docs/Web/API/Navigation
    navigation?: {
      canGoForward: boolean;
      canGoBack: boolean;
    };
  }
}

<button
  type="button" 
  disabled={window.navigation?.canGoBack === false}
  // ...
/>