T
TanStack2y ago
afraid-scarlet

Is there a simple way to navigate "one level up" in the tree?

Say that I'm on the route /posts/$postId/edit, what's the simplest way to navigate up to /posts/$postId? I could of course get the $postId variable and build the url myself. But it would be nice if there's something like a navigate.up() function.
19 Replies
conscious-sapphire
conscious-sapphire2y ago
navigate to ".."
afraid-scarlet
afraid-scarletOP2y ago
Would that work? Just "navigate("..")? Ok will try right away navigate("..") nor navigate({ to: ".." }) seems to be valid?
conscious-sapphire
conscious-sapphire2y ago
what do you mean it is not valid?
conscious-sapphire
conscious-sapphire2y ago
Navigation | TanStack Router Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
afraid-scarlet
afraid-scarletOP2y ago
It gives me the error "Type 'string' is not assignable to type 'never'" that I now realise is a typescript error. That's weird
conscious-sapphire
conscious-sapphire2y ago
which router version are you using?
afraid-scarlet
afraid-scarletOP2y ago
https://tanstack.com/router/v1/docs/framework/react/guide/navigation#everything-is-relative is saying that you have to provide a "from" tho, right? If it's not provided it will assume we're at "/". Meaning "../" will not actually work?
Navigation | TanStack Router Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
afraid-scarlet
afraid-scarletOP2y ago
I'm on 1.16.6 atm. I realise I'm a little behind. Will bump right away
conscious-sapphire
conscious-sapphire2y ago
ah yeah, relative routing was fixed lately so please update and try again I just tried navigate({to: '../') with the latest version and did not get any errors.
afraid-scarlet
afraid-scarletOP2y ago
And that actually seems to have been the cause. With the latest version a single "../" now works However, when doing "../../" I again get the typescript error. But it still works I wonder if it's just a vs code thing atm
conscious-sapphire
conscious-sapphire2y ago
@Chris Horobin should double "../" work?
afraid-scarlet
afraid-scarletOP2y ago
No. The project doesn't build when doing "../../" The example from the link above do ../../somewhere
afraid-scarlet
afraid-scarlet2y ago
I'm not sure if double '../' (../../) works without 'from'. This might be a bug. I would personally always suggest 'from' if you can as you get type safety
like-gold
like-gold2y ago
Hello! 👋 Is there a way of navigating “back” (same as navigate(-1) of react router?) couldnt find something on documentation.
conscious-sapphire
conscious-sapphire2y ago
history.back()
like-gold
like-gold2y ago
Is there a hook that exposes history?
afraid-scarlet
afraid-scarletOP2y ago
Yeah, the idea was that I didn't want to keep track of the ids and just be able to get up a few levels. One level does work well, and when needing to go multiple levels up it's not that hard have the params. Lets consider this solved 🙂 Thanks for all the help!
conscious-sapphire
conscious-sapphire2y ago
btw if you navigate from /posts/$postId/edit to /posts/$postId/ you should not even have to specify the param as router will take the current one if you don't specify it. try it out see also https://discord.com/channels/719702312431386674/1203462947851075674/1203462947851075674

Did you find this page helpful?