如何在 React 中正確實現后退按鈕？

Question

我正在嘗試在我的應用程序中顯示一個后退按鈕，這將允許用戶在歷史堆棧中向后導航。

這里的問題是，如果用戶從另一個鏈接來到應用程序，那么主頁將顯示后退按鈕。

如果用戶打開一個新選項卡並手動轉到應用程序，他們將不會看到后退按鈕，但如果他們嘗試登錄，這會將他們重定向到主頁，他們會在主頁上看到后退按鈕.

我會提供后退按鈕的代碼，但這並不是我的問題。 我知道location對象有一個在第一次渲染時未定義的key屬性，但這並沒有幫助我解決這個問題。

有沒有人設法在他們的應用程序中正確地實現了一個后退按鈕，它只會出現在他們需要的地方？

Answer 1

這是您要找的東西嗎？ 使用反應路由器，我可以在我的應用程序中的某些頁面上導航回儀表板。

我有組件/共享/按鈕。 它需要兩個參數目的地和文本作為道具。

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

希望能幫助到你。