conscious-sapphire

Way to determine if there is routing history within the app?

In some cases I'd like to call router.history.back(), but I don't want it to potentially end up sending the user out of our app. So with react-router@3 we have a helper goBackWithFallback() which takes an optional URL which we navigate to in case going back would send the user out of the apps. Is there a similar way to determine if there is routing history, and going back one step in history makes us end up in our app?

15 Replies

dependent-tan•15mo ago

this questions comes up repeatedly, but we don't have a solution for this yet. we could add this functionality, are you interested in exploring a few API ideas?

conscious-sapphireOP•15mo ago

I would imagine keeping track of an array of history locations, and exposing a method history.hasHistory() or similar that checks if there is more than 1 (= current) item in there. But I'm not sure how feasible that is, and for my usecase a simple boolean check is all I need (I don't need to operate on the entire history). What are some of the other usecases you've seen?

dependent-tan•15mo ago

the use cases are more or less the same as yours how did you implement yourgoBackWithFallback() helper?

conscious-sapphireOP•15mo ago

It relied on a quirk of react-router@v3 where a router.location.state.key property would not be null/undefined if you could go back, and it would be that on the first load.

helpful-purple•14mo ago

Inspired by this state.key approach I tried to add some logic to my RootLayout which is the first layer in my app that has access to the router hooks. On first render I tried to overwrite the state.key to a constant of my choice. That didn't work, I couldnt overwrite the state.key. I could overwrite the state.tempKey however. If the route was the entry to the app and it has no history tempKey is my constant. Now in my goBack component I do this

 const goBack = () => {
    if (state.location.state.__tempKey === APP_ENTRY_TEXT_KEY) {
      navigate({ to: fallbackUrl });
    } else {
      router.history.back();
    }
  };

 const goBack = () => {
    if (state.location.state.__tempKey === APP_ENTRY_TEXT_KEY) {
      navigate({ to: fallbackUrl });
    } else {
      router.history.back();
    }
  };

stormy-gold•14mo ago

Does that mean every navigate and link in your app has to provide extra data on the call, or can you just use the method provided as is? I wonder if we should just be making a router context and checking that. I have a single router file with all my routes in it. I could push a new path onto an array and check that in the button. If we're being memory efficient, even just a counter would be fine. Originally all i wanted to check was the length of history

stormy-gold•14mo ago

I ended up with this as a total hack. It uses global state to create a faux local site history array. It updates on route change, and only adds to the history if the path changes. That fits my use case.

stormy-gold•14mo ago

though this works, I've already abandoned it for something more specialized to the task. Generic back functions are probably seldom useful in a real application where as very specific "last xyz search page location" stored in a browser session store is far more likely a use case.

quickest-silver•10mo ago

Is there anyway we can already do this? I want to create breadcrumbs like this dashboard -> overview -> detail right now i can do this with matches and just loop over the rendered matches but i want the to know if the previous route the user has vitited is the overview route and if so i just want the user to go back if the click on the overview instead of navigating to the overview directly since they will lose there previous search params if they do so.

dependent-tan•10mo ago

we are working on an addon to history that will record push/pop of the history stack

itchy-amethyst•8mo ago

Any update to this ?

dependent-tan•8mo ago

no we have added the "canGoBack" functionality without recording

itchy-amethyst•8mo ago

ahh okk

dependent-tan•8mo ago

enough for you?

exotic-emerald•2mo ago

definitely enough for me, thanks!!

Gaming

Programming

Way to determine if there is routing history within the app?

Did you find this page helpful?