¿Cómo puedo cambiar un estado en una página diferente cuando un usuario hace clic en un enlace que lo lleva a esa página?
por ejemplo
página de inicio
<Link href="/about"> <button>click to go to about page</button> </Link>El usuario hace clic en el enlace en la página de inicio, luego, cuando el usuario llega a la página acerca de, el estado en la página acerca de cambia de falso a verdadero porque el usuario hizo clic en el enlace en la página de inicio.
acerca de la página
const [questionone, setQuestionone] = useState(false)El marco es Next.js.
En reaccionar, necesitamos usar para atribuir en lugar de href en la etiqueta de enlace
Su etiqueta debería gustar esto.
<Link to="/about"> <button>click to go to about page</button> </Link>Puede crear un código de estructura como este:
Debe crear una Route como la que se creó en App.js a continuación:
App.js
import { Switch, Route } from "react-router-dom"; import Homepage from "./Homepage"; import About from "./About"; const App = () => { return ( <Switch> <Route exact path="/" component={Homepage} /> <Route path="/about" component={About} /> </Switch> ); }; export default App; Y luego crea el componente Homepage.jsx como este a continuación, en este caso no necesita importar el Link y usar el Link para cambiar la ruta de su enrutador, en este caso uso useHistory para cambiar la ruta del enrutador y enviar un state al componente de la ruta de la ruta en este caso /about cuál es el componente es About.jsx :
Homepage.jsx
import { useHistory } from "react-router-dom"; const Homepage = () => { const history = useHistory(); return ( <div> <button onClick={() => { history.push({ pathname: "/about", state: { clickedFromHome: true } }); }} > click to go to about page </button> </div> ); }; export default Homepage; En About.jsx , puede consumir el estado de la página de Homepage para cambiar nuestra questionone de state en el componente About . Código de ejemplo a continuación:
About.jsx
import { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; const About = () => { const [questionone, setQuestionone] = useState(false); const location = useLocation(); useEffect(() => { if (location.state?.clickedFromHome) { setQuestionone(true); } }, [location.state?.clickedFromHome]); console.log(location.state?.clickedFromHome); return <div>About{questionone.toString()}</div>; }; export default About; y ahora el estado cambia en About.jsx si hace clic en el botón de la página de inicio para cambiar la ruta a '/ about'