When using history.goBack(),how to ensure only go back to pages within app?

user_10908861 0
Viewed 989

In Reactjs, I am writing a function component which includes a button looks like this:

<button onClick = {() =>history.goBack()}>
  Go Back
</button>

I need to ensure that when clicking on the button, only go back when the previous page is within the app, how can I achieve that?

Thanks so much for any help!

reactjs javascript
3 Answers

I can't think of any great solutions to your problem - it might not be possible (or I just don't know enough).

However, there is a workaround that may or may not be difficult to implement in your app depending on a number of factors. The history API allows you to do browser navigation as you've already found. The trick is to utilize it's ability to hold state at each point in browser history.

If, whenever a user navigates to a different part of your app, you implement the navigation with history.pushState(), and you add state like {allowBackNav:true} to each navigation, then whenever the user clicks your backwards navigation button, you can ensure that allowBackNav is set to true on the history's state before allowing that actions. This state will be set for every moment in history except the point when the user first loaded your app.

This system will break if the user navigates to a part of your app through any other means besides your controlled history.pushState(), e.g. through a link.

Here's a complete working example.

<html>
  <body>
    <button id="back" onClick="back()" disabled>Back</button>
    <button onClick="choose('A')">Option A</button>
    <button onClick="choose('B')">Option B</button>
    <button onClick="choose('C')">Option C</button>
    <p id="option"></p>
    <script>
window.back = function() {
  history.back()
}

window.choose = function(option) {
  history.pushState({allowBackNav: true}, '', `?option=${option}`)
  updateUI()
}

function updateUI() {
  const currentOption = new URL(window.location.href).searchParams.get('option')
  document.getElementById('option').innerText = currentOption ? `Selected: ${currentOption}` : ''
  document.getElementById('back').disabled = !(history.state && history.state.allowBackNav)
}
updateUI()
window.addEventListener('popstate', event => {
  updateUI()
})
    </script>
  </body>
</html>
user_76962230

document.referrer Returns the URL of the page the user last visited (unless your page has been visited directly using the URL bar)

An example making use of this:

function goBack() {
    if(document.referrer.includes(window.location.host)){
        window.history.back();
    }
}

The function includes simply returns a Boolean value based on whether or not one string includes another.

window.location.host is the current host name of the page and any associated port.

user_146234080

On each route change you can save the URL in the window object's history state. In your case it's fine if you just save the host name instead of complete URL. Like this :

window.history.pushState({ prevUrl: window.location.host }, null, "/new/path/in/your/app");

You can write a custom function, which will be called on the click :

goBack(){
  if(window.history.state && window.history.state.prevUrl){
    let url = window.history.state.prevUrl;
    //check if the url matches with the your applications host name
     if(url == 'hostName'){
         history.goBack();
     }
    }
}

You can refer to the following question about how to get the previous URL in js: https://stackoverflow.com/questions/3528324/how-to-get-the-previous-url-in-javascript#:~:text=If%20you%20want%20to%20go,%2D1%2C%2056%2C%20etc.

user_66378060
Related