如果有历史，只显示按钮

Question

我只想在有历史记录时显示一个按钮。这是正确的方法吗？browserCheck.jsx helper 识别浏览器和版本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

}

Answer 2

radihuq 答案的一个小改进：

{(history.length > 1) &&

<button

className={css.backButton}

onClick={history.goBack}

style={{ color: theme.bodyColour }}

>&lt;Back</button>

}

编辑：我现在看到你用 react 标记了你的帖子。我宁愿使用状态变量或反应路由器来跟踪历史记录。

编辑2：如果您使用反应路由器，请使用历史道具（不要忘记导入历史）：

{(this.props.history.length > 1) &&

<button

    className={css.backButton}

    onClick={history.goBack}

    style={{ color: theme.bodyColour }}

    >&lt;Back</button>

}