如何在React中正确实现返回按钮？

Question

我正在尝试在我的应用中显示一个“返回”按钮，允许用户通过历史记录后退导航。问题在于，如果用户从另一个链接进入应用，则主页将显示“后退”按钮。如果用户打开一个新标签并手动转到应用程序，则不会看到“后退”按钮，但如果他们尝试进行登录，则会重定向到主页，并在主页上看到“后退”按钮。我可以提供“返回”按钮的代码，但这并不是我的问题所在。我知道“位置”对象具有“键”属性，在第一次渲染时未定义，但这并没有帮助我解决此问题。是否有人成功地在其应用程序中正确实现了“返回”按钮，仅在所需位置显示？

- Mike K

---

你是否正在使用像React Router这样的路由库？此外，浏览器上的返回按钮有什么问题吗？ - azium

是的，我是这样做的，浏览器的返回按钮没有问题，只是觉得这样会更好的用户体验。 - Mike K

在状态中跟踪URL历史记录怎么样？这是一个相当容易实现的事情，只需在某个地方监听位置更改，甚至可以在后退按钮中进行。如果长度为0，则不显示该按钮 - 并在单击后退时从堆栈中删除最后一个条目。但浏览器中的后退按钮会干扰它。这就是为什么您很少看到此UX，因为给用户两种做事情的方式并不好。 - azium

好的，我想我会尝试使用redux来跟踪历史记录。谢谢。 - Mike K

Redux或组件状态，两者都可以。我建议使用一个虚拟的Route组件，在所有URL上呈现，或者使用React Router的新钩子之一，在位置更改的效果下创建状态更改。 - azium

Answer 1

这是您正在寻找的内容吗？使用React Router，我在我的应用程序的一些页面上有类似于返回仪表板的导航。

我有components/shared/Button。它将destination和text作为props传入。

import PropTypes from 'prop-types';
import React from 'react';

const BackButton = (props) => {
  const { dest, text } = props;

  return (
    <Button variant="secondary" href={`${dest}`}>{text}</Button>
  );
};

BackButton.propTypes = {
  dest: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
};

export default BackButton;

使用方法。

<BackButton dest="/" text="Back to Dashboard" />

希望能有所帮助。

- Solijon Sharipov