Estoy creando dos componentes de formulario y quiero mostrar dos botones en la carga de la página, donde el clic en el primer botón lleva al primer formulario o el clic en el segundo botón lleva al segundo componente del formulario. Intenté usar useNavigate/useHistory pero todavía estoy en la misma página.
function App() { const navigate = useNavigate() return ( <div className="app"> <Header /> <button onClick={()=> navigate("/main")}>Click me!</button> <button onClick={()=> navigate("/main2")}>Click me!</button> <Routes> <Route exact path="/main" component={Main}/> <Route exact path="/main2" component={Main2}/> </Routes> </div> ); } export default App;¿Cómo puedo usar react-router o state para mostrar el componente cuando se hace clic en cada botón? Apreciaría cualquier ayuda
Suponiendo que tiene react-router-dom v6 ya que ha usado <Routes></Routes> . Debe escribir el código de la siguiente manera suponiendo que ha incluido <Router> para envolver su aplicación en index.js .
function App() { const navigate = useNavigate() return ( <div className="app"> <Header /> <button onClick={()=> navigate("/main")}>Click me!</button> <button onClick={()=> navigate("/main2")}>Click me!</button> <Routes> <Route path="/main" element={<Main />}/> <Route path="/main2" element={<Main2 />}/> </Routes> </div> ); } export default App; Aquí, después de hacer clic en el primer botón, lo enrutará a /main , que servirá al componente <Main /> . El segundo botón se enrutará a /main2 y servirá al <Main2 /> .
En la versión 6, ya no es necesario escribir exact ya que el comportamiento predeterminado es hacer coincidir la ruta exacta. También hay algunos cambios en la interface donde el atributo del component se cambia a element y ahora toma el JSX como valor y no el objeto en sí.