Only display button if there is history

Question

I would like to display a button only if there is history.

Is this the correct way to do it?

browserCheck.jsx helper identifies the browser and version

const browserCheck = (function () {
  const { userAgent } = navigator; let browserNumber; let M = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];  
  if (/trident/i.test(M[1])) {
    browserNumber = /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    return `IE ${browserNumber[1] || ''}`;
  }
  if (M[1] === 'Chrome') {
    browserNumber = userAgent.match(/\b(OPR|Edge?)\/(\d+)/);
    if (browserNumber != null) return browserNumber.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  if ((browserNumber = userAgent.match(/version\/(\d+)/i)) != null) M.splice(1, 1, browserNumber[1]);
  return M.join(' ');
}());

export default browserCheck;

browserHistory.jsx sets the initial history length based on the browser


import browserCheck from './browserCheck';
const browserHistory = (function () {
  const browsers = ['chrome', 'safari', 'firefox', 'msie', 'opera'];
  let currentBrowser;
  browsers.forEach((browser) => {
    if (browserCheck.toLowerCase().indexOf(browser) !== -1) {
      currentBrowser = browser;
    }
  });
  // Internet Explorer and Opera start at 0, while Firefox, Chrome, and Safari start at 1.
  // Refer to: https://www.w3schools.com/jsref/prop_his_length.asp
  let initialValue = 0;
  if (currentBrowser === 'chrome') initialValue = 1;
  if (currentBrowser === 'firefox') initialValue = 1;
  if (currentBrowser === 'Safari') initialValue = 1;
  return initialValue;
}());

export default browserHistory;

component.jsx



{(history.length > browserHistory) ?
    <button
    className={css.backButton}
    onClick={history.goBack}
    style={{ color: theme.bodyColour }}
    >&lt;Back</button> :
    null
}

UPDATE:

please see: w3schools.com/jsref/prop_his_length.asp

Note: Internet Explorer and Opera start at 0, while Firefox, Chrome, and Safari start at 1

NEW UPDATE: helpers added. browserHistory contains the default browser history length to compare against.

radihuq · Answer 1 · 2019-10-31T20:21:29.600

0

I would rewrite it slightly like this:

{(history.length > 1) ?
    <button
    className={css.backButton}
    onClick={history.goBack}
    style={{ color: theme.bodyColour }}
    >&lt;Back</button> :
    null
}

edited Oct 31 '19 at 20:21

answered Oct 31 '19 at 17:57

radihuq

640
4
7

Just history.length will return a true if that property exists, or false if it doesn't. Given the context of this being a back button you need more information that just if that property exists. I'm actually going to change the code to history.length > 1 because it doesn't make sense to show the button unless if there's something to actually go back to (I missed that part in your question). Let me know if it works – radihuq Oct 31 '19 at 20:18
Thanks - will this work in all browsers? for me it works fine on Chrome but not sure about firefox have a different initial value for history.length? Im getting strange results with firefox. – h3110 Nov 01 '19 at 10:44
please see: https://www.w3schools.com/jsref/prop_his_length.asp . Note: Internet Explorer and Opera start at 0, while Firefox, Chrome, and Safari start at 1. – h3110 Nov 01 '19 at 10:47

Sylvain · Answer 2 · 2019-11-01T17:33:46.697

0

A minor improvement to radihuq answer:

{(history.length > 1) &&
<button
className={css.backButton}
onClick={history.goBack}
style={{ color: theme.bodyColour }}
>&lt;Back</button>
}

Edit: I see now that you tagged your post with react. I would rather use a state variable or react router to keep track of history.

Edit 2: If you use react router, use the history props (don't forget to import history):

{(this.props.history.length > 1) &&
<button
    className={css.backButton}
    onClick={history.goBack}
    style={{ color: theme.bodyColour }}
    >&lt;Back</button>
}

edited Nov 01 '19 at 17:33

answered Nov 01 '19 at 11:46

Sylvain

264
3
15

Will this work on all browsers? some browsers seem to have different initial history.length values? w3schools.com/jsref/prop_his_length.asp – h3110 Nov 01 '19 at 11:50
1

If different browser have different initial values, you should first check which browser is used and create a variable to hold the current browser initial history index. Then if history.length is greater than this variable, show the button. It can be useful to read this: https://stackoverflow.com/questions/2400935/browser-detection-in-javascript/2401861#2401861 – Sylvain Nov 01 '19 at 11:53
is using the edited code above acceptable or should I be using a state variable? – h3110 Nov 01 '19 at 16:08
It won't really work like this. As I said, you ca use a state variable or if you use react router, you can use the history props. Check my edited answer with new code. – Sylvain Nov 01 '19 at 17:28

Only display button if there is history

2 Answers2