如果有历史，只显示按钮

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) ?&nbsp; &nbsp; <button&nbsp; &nbsp; className={css.backButton}&nbsp; &nbsp; onClick={history.goBack}&nbsp; &nbsp; style={{ color: theme.bodyColour }}&nbsp; &nbsp; >&lt;Back</button> :&nbsp; &nbsp; null}

Answer 2

radihuq 答案的一个小改进：{(history.length > 1) &&<buttonclassName={css.backButton}onClick={history.goBack}style={{ color: theme.bodyColour }}>&lt;Back</button>}编辑：我现在看到你用 react 标记了你的帖子。我宁愿使用状态变量或反应路由器来跟踪历史记录。编辑2：如果您使用反应路由器，请使用历史道具（不要忘记导入历史）：{(this.props.history.length > 1) &&<button&nbsp; &nbsp; className={css.backButton}&nbsp; &nbsp; onClick={history.goBack}&nbsp; &nbsp; style={{ color: theme.bodyColour }}&nbsp; &nbsp; >&lt;Back</button>}