Estoy intentando simplemente tener una variable compartida entre mis páginas en mi aplicación Next.Js... Mi _app.js a continuación contiene lo siguiente...
import { useState } from 'react'; const CustomApp = ({ Component, pageProps }) => { // Variables const [testVariable, setTestVariable] = useState(0) // globalFunctions const setTestVariable = (newValue) => setLocalVariable(newValue); return ( <Component {...pageProps} // Export Variables testVariable={testVariable} // Export Functions setTestVariable={setTestVariable} /> ); } export default CustomAppTengo dos páginas... Ambas son iguales excepto que una se llama index.js y exporta Inicio, la otra se llama about.js y exporta Acerca de...
import { useState, useEffect } from 'react' import 'bulma/css/bulma.css' import styles from '../styles/Home.module.css' const Home = ({ testVariable, setTestVariable, }) => { useEffect(() => { }) return ( <div id={styles.outerDiv}> <Head> <title>My Next.Js Page</title> <meta name="description" content="A Next.js application" /> </Head> <div id={styles.navBar}> <a href="/" id={styles.navLink}> <h3>Home</h3> </a> <a href="/about.js" id={styles.navLink}> <h3>About</h3> </a> </div> <div id={styles.content} className="content"> <br/> <h2>Test Variable: {testVariable}</h2> <button id={styles.incrementButton} onClick={setTestVariable(1)}>Set Test Variable to 1</button> </div> </div> ) } export default HomeCuando toco el botón, la variable en mi página cambia a 1, sin embargo, cuando cambio de página, la variable vuelve a 0. Tampoco recibo errores de ningún tipo. ¡Todos los comentarios son muy apreciados! Gracias por tu tiempo.
La variable vuelve a 0 porque está usando a etiqueta que "recarga" la página. Para navegar, debe usar el componente de Link que se incluye a continuación.
Este componente de Link evita el comportamiento predeterminado de volver a cargar la página y puede mantener su estado mientras navega por la página.