Javascript 如何在React中正确执行后退按钮？

我试图在我的应用程序中显示一个后退按钮，这将允许用户在历史堆栈中向后导航

这里的问题是，如果用户从另一个链接访问应用程序，则主页将显示“后退”按钮

如果用户打开一个新选项卡并手动转到应用程序，他们将看不到“后退”按钮，但如果他们尝试登录，这将重定向到主页，他们将在主页上看到“后退”按钮

我会为后退按钮提供代码，但这并不是我真正的问题。我知道

location

对象的

key

属性在第一次渲染时未定义，但这并没有帮助我解决这个问题

---

是否有人成功地在应用程序中实现了后退按钮，该按钮只会显示在他们需要的位置？

这是您正在寻找的吗？使用react路由器，我可以在应用程序的某些页面上导航回仪表板

我有组件/共享/按钮。它以两个参数destination和text作为道具

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;

从“道具类型”导入道具类型；
从“React”导入React；
常量BackButton=（道具）=>{
const{dest，text}=props；
返回(
{text}
);
};
BackButton.propTypes={
dest:PropTypes.string.isRequired，
text:PropTypes.string.isRequired，
};
导出默认BackButton；

用法

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

---

希望能有所帮助。

您是否正在使用react router这样的路由库？浏览器上的“后退”按钮也有什么问题？是的，浏览器上的“后退”按钮没有问题，我只是觉得这是一个更好的用户体验。在某个地方跟踪url历史记录怎么样？这是一件相当容易完成的事情，只需在某处倾听位置的变化，甚至可能是在你的后退按钮中。如果长度为0，则不显示按钮，并在单击“上一步”时删除堆栈中的最后一个条目。不过，浏览器中的“后退”按钮会弄乱这一点。这就是为什么你很少看到这种用户体验，给用户两种方式做事情是不好的。这是公平的，我想我会尝试用redux跟踪历史。谢谢。redux或组件状态都可以。我建议使用一个在所有URL上呈现的虚拟路由组件，或者使用react Rotuer的一个新钩子创建一个状态更改作为位置更改的效果