Botón Reaccionar al hacer clic para redirigir la página

1. ¿Qué hace la función onClick?
2. ¿Cómo combinamos onClick con React-Router-Dom
3. Botón de reacción onClick para redirigir la página
4. Conclusión

Gracias a la función react-router-dom, los desarrolladores web pueden crear fácilmente aplicaciones de una sola página que pueden navegar a otra página al crear una aplicación de varias páginas. Pero, ¿qué sucede cuando intentamos usar la función onClick junto con la función react-router-dom?

¿Qué hace la función onClick?

La función onClick es un detector de eventos. Su función está programada a un elemento de manera que cuando se hace clic en ese elemento (enlace o botón), se activa la función onClick y realiza la función para la que está diseñado o programado.

Por ejemplo, queremos que cuando se haga clic en un enlace, el enlace nos lleve a otra página o traiga un mensaje emergente; esta es la función que realiza el evento onClick.

¿Cómo combinamos onClick con React-Router-Dom

La práctica habitual al redirigir a otra página en React es usar el paquete react-router-dom; luego, aplicamos la función Ruta ruta exacta y la función Enlace para completar el proceso de codificación.

Los procesos son en su mayoría similares a la explicación anterior cuando intentamos usar el detector de eventos onClick con el paquete react-router-dom.

Necesitamos crear otras páginas a las que redirigiremos; la diferencia radica principalmente en la codificación y que onClick es un detector de eventos, una función más propicia para crear mensajes emergentes, entre otras cosas.

Botón de reacción onClick para redirigir la página

Para comenzar cada proyecto React, comenzamos poniendo este código en la terminal para crear una nueva aplicación React: npx create-react-app examplefive. Una vez que se crea la aplicación del proyecto, debemos instalar el paquete react-router-dom usando npm i react-router-dom.

A continuación, abrimos la carpeta del proyecto en nuestro editor de texto y creamos dos archivos más para que sirvan como las páginas que queremos redirigir. Nos dirigiremos a la carpeta src en la carpeta del proyecto examplefive y crearemos dos archivos más, Home.js y Contact.js.

Después de esto, pasamos por la codificación adecuada, comenzando con App.js, como se muestra a continuación.

Fragmento de codificación App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Home";
import Contact from "./Contact";

const App = () => {
  return (
    <div style={styles.app}>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

const styles = {
  app: {
    padding: 50,
  },
};

Aquí, agregamos fragmentos de código que indican las páginas a las que queremos navegar después de hacer clic en un botón.

Después de esto, navegamos a Home.js para hacer más codificación.

Fragmento de código Home.js:

import React from "react";
import { useNavigate } from "react-router-dom";

const Home = (props) => {
  const navigate = useNavigate();

  return (
    <>
      <h1>Home Page</h1>
      <p>Go to the contact page by using one of the following:</p>
      <hr />

      {/* Button */}
      <p>
        <button onClick={() => navigate("/contact")}>Go to Contact</button>
      </p>

      {/* Checkbox */}
      <p>
        <input
          type="checkbox"
          onChange={() => navigate("/contact")}
        ></input>
        <span>Check this checkbox to go to the contact page</span>
      </p>

      {/* Text field */}
      <p>
        <input
          type="text"
          onChange={(e) => {
            if (e.target.value === "contact") {
              navigate("/contact");
            }
          }}
          placeholder="Enter 'contact' to navigate"
        ></input>
      </p>
    </>
  );
};

export default Home;

El Home.js, la página principal, alberga la mayor parte del contenido y la codificación. Podemos ver que el detector de eventos onClick está vinculado al botón contacto de modo que una vez que se hace clic, nos lleva a la página de contacto.

Fragmento de código Contacto.js:

import React from "react";
import { useNavigate } from "react-router-dom";

const Contact = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <h1>Contact Page</h1>
      <br />
      <button onClick={() => navigate(-1)}>Go Back</button>
    </>
  );
};

export default Contact;

Al igual que el archivo Home.js, vinculamos el detector de eventos onClick al botón Volver; cuando se hace clic en este botón, regresamos a la página de inicio.

Producción:

Conclusión

El detector de eventos onClick es otra solución que se puede desarrollar para crear aplicaciones de varias páginas como el método react-router-dom. Sin embargo, no ha habido un método conocido para redirigir a otra página sin usar el paquete react-router-dom.