T
TanStack•2y ago
frozen-sapphire

Go Back button with reference to location before entering sub-route

Lets say we have these routes: /$workspaceId /$workspaceId/$fileId /$workspaceId/$fileId/studio /$workspaceId/settings /$workspaceId/settings/billing /$workspaceId/settings/account etc... From anywhere in the app a user can open the settings routes. On the settings page there is a "Go Back" button. The Go back button should always send the user back to where they came from, disregarding how many settings routes the user navigated in we just want to know where they came from when the first entered the settings routes. If the user navigated directly to the settings page and there is no "came from" location we can send them to a default location (/$workspaceId). Is there an official way to do this? So far im thinking of using state prop in Link component to store the location when entering settings, then when navigating out fetching key value. state provides a HistoryState object with an unique key. Can that key be used to navigate back to the route that key represents? example of flow user opens workspace /acme user opens file /acme/file-a /acme/file-b user goes to settings /acme/settings user navigates on settings page /acme/settings/billing /acme/settings/members /acme/settings/account user presses "go back" button /acme/file-b another flow would be user opens file /acme/file-a user opens studio /acme/file-a/studio user goes to settings /acme/settings user navigates on settings page /acme/settings/billing /acme/settings/members user presses "go back" button /acme/file-a/studio
7 Replies
afraid-scarlet
afraid-scarlet•2y ago
you could keep the route in a query param /acme/settings?returnTo=/acme/file-b
frozen-sapphire
frozen-sapphireOP•2y ago
is there a way to do it without a search param? i know i can do route masking to hide the search params but that feels like everytime we redirect the user to the settings page we will need that logic that creates the search param and also not forget the "mask" prop. (by logic i mean something like mask={{returnTo: window.location}} or something along that line) sending user to settings can happen in multiple locations (command bar, settings button on navpane, shortcut, and some actions across the app where user needs to do something on a specific settings page)
afraid-scarlet
afraid-scarlet•2y ago
you could subscribe to router events like this, store the pathname in localStorage and retrieve it for the go-back action 
router.subscribe('onBeforeLoad', (event) => {
      if(event.toLocation.pathname === '/settings') {
        localStorage.setItem('returnTo',  event.fromLocation.pathname)
      }
    })
router.subscribe('onBeforeLoad', (event) => {
      if(event.toLocation.pathname === '/settings') {
        localStorage.setItem('returnTo',  event.fromLocation.pathname)
      }
    })
frozen-sapphire
frozen-sapphireOP•2y ago
any way of getting this fromLocation key inside of the beforeLoad function on the route declaration itself? or maybe access the router history inside of the beforeLoad function.
afraid-scarlet
afraid-scarlet•2y ago
for history you need to implement your own history. by default, router uses the browser native history
frozen-sapphire
frozen-sapphireOP•2y ago
yea i read up on that, its a bummer, I wish there was a clearer way do go about doing something like this. right now I am using your snippet in the router.tsx file where i create the router via createRouter. It feels like code that should not belong there but there is no other place i can think of putting it. Im not a fan of this solution, I think fromLocation attached to the beforeLoad function arguments would be useful.
afraid-scarlet
afraid-scarlet•2y ago
can you please create a GitHub feature request issue for this? so we don't forget this idea

Did you find this page helpful?