[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();
  console.log(stack)

  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

[Narcha]

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?

[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).

[Narcha]

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