javascript - 仅当有历史记录时才显示按钮

Question

我想仅在有历史记录时才显示按钮。

这是正确的方法吗？

browserCheck.jsx 帮助程序识别浏览器和版本

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 根据浏览器设置初始历史记录长度

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;

组件.jsx

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

更新:

请参阅:w3schools.com/jsref/prop_his_length.asp

注意:Internet Explorer 和 Opera 从 0 开始，而 Firefox、Chrome 和 Safari 从 1 开始

新更新:助手补充道。 browserHistory 包含要比较的默认浏览器历史记录长度。

Answer 1

我会稍微重写它，如下所示:

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