进入下一页后如何在 React 中存储布尔值？

Question

我正在使用 React Router 设置我的联系页面（由多个页面、嵌套路由器组成）：

<Route path="/contact" element={<Contact />}>
        <Route path="name" element={<ContactName />} />
        <Route path="email" element={<ContactEmail />} />
        <Route path="message" element={<ContactMessage />} />
</Route>

当我第一次进入我的联系页面时，我有一个按钮可以转到 ContactName 页面（这样他们就可以输入他们的名字） ：

<a 
     href="/contact/name"
     className="contact-icon-color contact-icon-link" 
     onClick={() => { setContactButton(false) }}>
</a>

当他们单击按钮时，我将按钮链接的显示属性设置为无。这就像我想要的那样。但是，当它移至 ContactName 页面时，该按钮会再次出现。我知道布尔值 contactButton 在我的功能组件中使用以下行重置：

const [contactButton, setContactButton] = useState(true);

我不知道如何克服这个问题。我的问题是：

1. 是否有更好的替代方法来删除按钮或移至下一页？
2. 如果没有，我将如何存储 contactButton 的最新值，以便链接不会重新出现？

谢谢，请注意我是 React 新手。

Answer 1

据我所知，你可以在这里使用 props 。

首先，将 PropTypes 导入到您的项目中。
https://www.npmjs.com/package/prop-types

您的代码类似如下所示：

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Route, Link } from 'react-router-dom';

export const Contact = ({ isVisibleButton }) => {
  const [contactButton, setContactButton] = useState(isVisibleButton);

  return(
    <Link to="/contact/name"
     className="contact-icon-color contact-icon-link" 
     onClick={() => { setContactButton(!isVisibleButton) }} />
    
    {contactButton && (
     <button>something you want</button>
    )}
  )
}

Contact.propTypes = {
  isVisibleButton: PropTypes.bool,
};

Contact.defaultProps = {
  isVisibleButton: true,
};

Ps：请检查导入或小错误，我试图解释您的问题。我想，这是更好/先进的方式，而不是为本地存储设置值