Estoy usando React Router para configurar mi página de contacto (que consta de varias páginas, enrutador anidado):
<Route path="/contact" element={<Contact />}> <Route path="name" element={<ContactName />} /> <Route path="email" element={<ContactEmail />} /> <Route path="message" element={<ContactMessage />} /> </Route>Cuando entro por primera vez en mi página de contacto, tengo un botón para pasar a la página ContactName (para que puedan ingresar su nombre):
<a href="/contact/name" className="contact-icon-color contact-icon-link" onClick={() => { setContactButton(false) }}> </a>Cuando hacen clic en el botón, configuro la propiedad de visualización del enlace del botón en ninguno. Esto funciona como pretendía. Sin embargo, cuando pasa a la página ContactName, el botón vuelve a aparecer. Entiendo que el valor booleano contactButton se restablece con la siguiente línea en mi componente funcional:
const [contactButton, setContactButton] = useState(true);No sé cómo superar esto. Mis preguntas son:
Gracias, tenga en cuenta que soy nuevo en React.
Como sé, puedes jugar con props aquí.
Primero, importa PropTypes a tu proyecto. https://www.npmjs.com/package/prop-types
Su código se ve similar a lo siguiente:
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, };PD: por favor, verifique las importaciones o errores menores, traté de explicar lo que preguntó. Y es, supongo, una forma mucho mejor/avanzada en lugar de establecer valor para el almacenamiento local