Soy nuevo en javascript y reacciono, y estoy tratando de enrutar de un componente a otro cuando se hace clic en un botón.
ejemplo de código html en la página de registro:
<!-- signup button --> <div id = "signup"> <button class="signupbutton">Sign up</button> </div>así que cuando el botón de registro quiero que se dirija a esta página html:
<!-- page title --> <h1><strong>Let's get started! First up, where are you in the planning process?</strong</h1>¿Alguna idea sobre cómo puedo hacer esto? - Sé que necesito hacer esto en javascript y con reaccionar (creé un archivo JS para la página de registro y la página del proceso de planificación), pero no estoy seguro de cómo hacerlo. ¿Algunas ideas?
No puede vincular en HTML directamente con React. Primero debe configurar dos componentes.
Uno para la página con el Botón:
export default function ButtonPage () { return ( <div id = "signup"> <button className="signupbutton">Sign up</button> </div> ); }Uno con la página para la página de inicio:
export default function GetStarted () { return ( <h1><strong>Let's get started! First up, where are you in the planning process?</strong</h1> ); } Luego, debe configurar su componente principal, el componente de la aplicación y vincular los componentes secundarios que desea mostrar. Si usa la última versión de React, necesita importar BrowserRouter , Route y Routes desde react-router-dom :
import { BrowserRouter, Route, Routes } from "react-router-dom"; export default function App () { return ( <BrowserRouter> <Routes> <Route path="/signup" element={<ButtonPage/>}></Route> <Route path="/getstarted" element={<GetStarted/>}></Route> </Routes> </BrowserRouter> ); } Luego, debe importar el Link desde react-router-dom dentro de su componente ButtonPage y vincular al otro componente:
import { Link } from "react-router-dom"; export default function ButtonPage () { return ( <div id = "signup"> <Link to="/getstarted"> <button className="signupbutton">Sign up</button> </Link> </div> ); }Et voilà: Vinculaste dos páginas en React. Para obtener más información, consulte la documentación de React-Router aquí .