Go back/forward

[reintroducing]

In react-router you have the ability to do history.goBack. I have combed through the docs and have not found a way to do this in react-location. What is the best way to accomplish this?

[reintroducing]

Of course I found my answer right after posting this. useLocation exposes history which you can then call back on. @tannerlinsley the useLocation hook is not listed in the API docs so I wasn't aware of its existence until I found a different issue where you mentioned it.

[altmshfkgudtjr]

Thank you!
I bought my precious time.

I used like this.

import { useLocation } from '@tanstack/react-location';

const location = useLocation();
const onBack = () => location.history.back();

[iamolegga]

Late 2023 answer:

const router = useRouter();
const onBack = () => router.history.back();

[well1791]

Great!! Now how do I do that using <Link> component?

[bakesteve]

anyone done this? using history.go(-1) works per below, but be nicer to use a link, but cant see a way that const { history } = useRouter() can pass a usable value to <Link to={...}>..Back</Link>

[herbievine]

any updates on how this can be achieved? @schiller-manuel

[rudzky]

Any update on this? I would like to able to navigate back only in the scope of app routing and don't go back to the page I was before I came to this app.

[fabiobaser]

I have the same issue. You can look into the history and dynamically route to different point.

[ento-io]

Such a basic thing should be in the docs

[AbdelhakimMhioul]

I used it like this :

 const { history } = useRouter()
 
 onClick={() => history.go(-1)}

[ghost]

None of the proposed solutions allow app back/forward navigation without a page reload. Would be very nice to have this feature.

[igor9silva]

Anyway to determine if there is something beyond the current route on the stack?
I want to dynamically enable/disable a "forward" button.

[igor9silva]

@tannerlinsley @SeanCassiere sorry to bother, I've searched everywhere. Only way I could achieve that was through subscribing to router events, which sounds hacky. Is there a better way?

[schiller-manuel]

using router events is not hacky.
however, we are building this in #3017

[igor9silva]

thank you 🙏
Would love a canGoForward also

[schiller-manuel]

released now!

[SalahAdDin]

released now!

what is it for?

[zngly-vlad]

With the new release of useCanGoBack, it would be nice it if there was a way to specify the direction in the navigation.

// something like could be added to specify that we are going backwards, 
// but the "to" route is still provided in case canGoBack is false

// given the current route is /users/$userId
<Link to="/users" direction="back" />

Currently I am wrapping the navigate hook and Linkcomponent to use router.history.go(-1) conditionally based on the direction and if it can go back.

This would be really helpful in order to preserve url params and scroll-restoration

[primado]

I also faced this same issue, this is the 2nd project I'm working on that uses Tanstack router. I also combed docs but I didn't see it listed in the docs. So instead of using a LLM to find I said lemme go with the "old school" way of doing it. I Googled and here am I.

@tannerlinsley Pls the Tanstack Router needs to be updated like how the React Query Docs is. Or at least show how these functionalities work. Thank you and thanks for all the good things you're doing for the community.

[schiller-manuel]

what exactly is missing?

[primado]

I meant, how to use the hooks in Tanstack Router. Because I have been going through the docs to find something like this but I couldn't see any, until I Googled.

const router = useRouter();
const onBack = () => router.history.back();

[schiller-manuel]

can you contribute to the docs?

[primado]

can you contribute to the docs?

I would love to do it later in the future. I will reach out to you when I'm ready.

[tomredman]

This is what I'm doing in order to use a <Link /> to go back via `router.history.back()':

  const router = useRouter();
  const onBack = () => router.history.back();

  <Link
    to={"/"}
    onClick={() => {
      onBack();
      return false;
    }}
  >
    <ArrowLeft />
    Back
  </Link>

Returning "false" from onClick() in an <a> tag (which <Link /> is) surpresses the browsers default behavior. So here I'm effectively ignoring the to parameter and instead running onBack().

It works, with one little weird UX glitch that the URL flashes... something... very quickly on navigating back. I assume it has to do with goBack() racing with return false.

[deshazer]

This is a nice hack! You can also prevent the flash that you are referring to by using the event in your onClick function and doing event.preventDefault()

<Link
  to="/"
  onClick={(e) => {
    e.preventDefault()
    router.history.back()
    return false
  }}
>Back</Link>

[MPiland]

Serious question from someone still learning, why wouldn't you just use a button at this point? If you're ignoring the to portion, doesn't that render the component unnecessary and just adds an extra import?

[tomredman]

@MPiland now I'm trying to think back why I wanted to use a here – and I think it's because navigating with anything other than causes a full reload, and I wanted to keep that back functionality seamless.

[adamthewilliam]

https://tanstack.com/router/latest/docs/framework/react/api/router/useCanGoBack#showing-a-back-button

[adamthewilliam]

I wish there was a useCanGoForward