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>

[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?