Estoy construyendo un sitio web usando react y react-router-dom y encontré un problema.
Cuando tengo un elemento de pie de página que se representa en cada página web de esta manera:
<Router> <Header /> <Routes> <Route path="/" element={<HomePage />} /> <Route path="shop/*" element={<ShopRoutes />} /> <Route path="cart" element={<CartPage />} /> <Route path="login" element={<LoginPage />} /> <Route path="register" element={<RegisterPage />} /> </Routes> <Footer /> </Router> En las páginas en las que debe desplazarse hacia abajo para que se muestre el pie de página en la parte inferior de la página, debe agregar position: relative; .
Y en las páginas sin la necesidad de desplazarse hacia abajo en el pie de página para que se muestre en el botón, debe agregar la position: absolute; .
¿Cómo hago para que en cada página el estilo sea diferente dependiendo de la longitud de la página?
Puedo configurar un estado de app.jsx useState hará una clase condicional de nomenclatura para el elemento de pie de página, y en cada página, configuraré el estado como verdadero o falso:
aplicación.jsx:
const [pageBig, setPageBig] = useState(false); <Router> <Routes> <Route path="/" element={<HomePage setPageSize={setPageBig}/>} /> ..... more routs </Routes> <Footer pageSize={pageBig}/> </Router>pie de página.jsx:
<footer className={ props.pageSize ? "big-page" : "small-page"}> <p>© Copyright {currentYear}</p> </footer> por ejemplo, si la página de inicio es una página larga, estableceré pageBig en verdadero y la clase de pie de página cambiará:
props.setPageSize(true); También puedo hacer lo mismo con createContex pero en ambas soluciones tendré que asegurarme de que en cada página configuro bigPage para que sea la correcta.
¿Cómo puedo lograr esta función?
Podría crear un mejor diseño para toda su página para tener en cuenta esto, con solo CSS y no confiar en JS en absoluto.
Incorporando sus componentes en una estructura como la siguiente, utilizando el flexbox
html, body { padding: 0; margin: 0; } .container { display: flex; flex-direction: column; min-height: 100vh; color:#eee; } .header { padding:0.5em; background: #303080; } .main { flex: 1; background: #308030; padding:0.5em; } .footer { background: #803030; padding:0.5em; } <div class="container"> <div class="header"> Header </div> <div class="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit aut et voluptatibus culpa iste earum fugit enim obcaecati doloremque recusandae, rerum ullam quod consectetur! Iure nulla, perferendis cumque. Id, quas, blanditiis! Facere eaque dolores accusamus repudiandae sequi fugiat illo perspiciatis doloribus quo expedita possimus impedit, autem id adipisci voluptate reiciendis molestiae. Possimus facilis consectetur similique saepe ipsum, repellendus iusto ipsa iste quod mollitia distinctio quos ut </div> <div class="footer"> Footer </div> </div>Salí con esta solución, creando un enlace personalizado que verificará el tamaño del root div en relación con el tamaño de la ventana. Esta solución se inspiró en una respuesta a una pregunta diferente .
Utilicé el enlace personalizado que verifica el tamaño de la ventana desde aquí y creé un enlace personalizado que verifica la altura del root div :
function useRootSize () { const [rootSize, setRootSize] = useState([0, 0]); useLayoutEffect(() => { function updateRootSize() { setRootSize([document.getElementById("root").offsetWidth, document.getElementById("root").offsetHeight]); } document.addEventListener('click', updateRootSize); updateRootSize(); return () => document.removeEventListener('click', updateRootSize); }, []); return rootSize; };(Estoy enumerando los clics porque no podía pensar en un detector de eventos abater, cada vez que vaya a una página nueva, hará clic en algo para llegar allí)
elemento de pie de página:
const Footer = () => { const [windowWidth, windowHight] = useWindowSize(); const [rootWidth, rootHight] = useRootSize(); const currentYear = new Date().getFullYear(); return ( <footer className={windowHight >= rootHight ? "small-page" : "big-page"}> <p>© Copyright {currentYear}</p> </footer> ) };archivo CSS:
.small-page { position: absolute; ...morestyles } .big-page { position: relative; ...morestyles }Ahora el pie de página cambiará el nombre de clase sin pasar accesorios o contexto.
Si tiene una solución mejor, me gustaría escucharla :)