javascript - 如何在 React 中正确实现后退按钮？

Question

我正在尝试在我的应用程序中显示后退按钮，这将允许用户在历史记录堆栈中向后导航。

这里的问题是，如果用户从另一个链接进入应用程序，那么主页将显示后退按钮。

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

我会提供后退按钮的代码，但这并不是我的问题所在。我知道 location 对象有一个 key 属性，该属性在第一次渲染时未定义，但这并没有帮助我解决这个问题。

有人设法在他们的应用程序中正确实现后退按钮，该按钮只会显示在他们需要的地方吗？

Answer 1

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

我有组件/共享/按钮。它需要两个参数目的地和文本作为 Prop 。

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" />

希望有帮助。