Reagieren Sie auf die Schaltfläche, um die Seite umzuleiten

1. Was macht die onClick-Funktion
2. Wie kombinieren wir onClick mit React-Router-Dom
3. Reagieren Sie auf die Schaltfläche onClick, um die Seite weiterzuleiten
4. Abschluss

Dank der react-router-dom-Funktion können Webentwickler ganz einfach Single Page Apps erstellen, die bei der Erstellung einer Multipage App zu einer anderen Seite navigieren können. Aber was passiert, wenn wir versuchen, die Funktion onClick neben der Funktion react-router-dom zu verwenden?

Was macht die onClick-Funktion

Die Funktion onClick ist ein Event-Listener. Seine Funktion ist so auf ein Element programmiert, dass beim Anklicken dieses Elements (Link oder Schaltfläche) die onClick-Funktion aktiviert wird und die Funktion ausführt, für die sie entworfen oder programmiert wurde.

Zum Beispiel möchten wir, dass, wenn auf einen Link geklickt wird, der Link uns zu einer anderen Seite führt oder eine Pop-up-Nachricht bringt; Dies ist die Funktion, die das Ereignis onClick ausführt.

Wie kombinieren wir onClick mit React-Router-Dom

Die übliche Vorgehensweise beim Umleiten auf eine andere Seite auf React ist die Verwendung des Pakets react-router-dom; Anschließend wenden wir die Funktion Routengenauer Pfad und die Funktion Link an, um den Codierungsprozess abzuschließen.

Die Prozesse ähneln größtenteils der obigen Erklärung, wenn wir versuchen, den Event-Listener onClick mit dem Paket react-router-dom zu verwenden.

Wir müssen andere Seiten erstellen, auf die wir umleiten werden; Der Unterschied besteht hauptsächlich in der Codierung und darin, dass der onClick ein Ereignis-Listener ist, eine Funktion, die unter anderem das Erstellen von Popup-Nachrichten fördert.

Reagieren Sie auf die Schaltfläche onClick, um die Seite weiterzuleiten

Um jedes React-Projekt zu beginnen, fügen wir zunächst diesen Code in das Terminal ein, um eine neue React-App zu erstellen: npx create-react-app examplefive. Sobald die Projekt-App erstellt ist, müssen wir das Paket react-router-dom mit npm i respond-router-dom installieren.

Als nächstes öffnen wir den Projektordner in unserem Texteditor und erstellen zwei weitere Dateien, die als Seiten dienen, die wir umleiten möchten. Wir gehen in den Ordner src im Projektordner examplefive und erstellen zwei weitere Dateien, Home.js und Contact.js.

Danach gehen wir die richtige Codierung durch, beginnend mit der App.js, wie unten.

Codding Snippet 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,
  },
};

Hier fügen wir Codeschnipsel hinzu, die die Seiten angeben, zu denen wir nach dem Klicken auf eine Schaltfläche navigieren möchten.

Danach navigieren wir zu Home.js, um weitere Codierungen vorzunehmen.

Codeschnipsel 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;

Die Home.js, die Hauptseite, beherbergt den grössten Teil des Inhalts und die Codierung. Wir können sehen, dass der Ereignis-Listener onClick mit der Schaltfläche Kontakt verknüpft ist, sodass er uns nach dem Klicken auf die Kontaktseite navigiert.

Code-Snippet Contact.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;

Wie die Datei Home.js verknüpfen wir den Event-Listener onClick mit der Schaltfläche Go Back; Wenn diese Schaltfläche angeklickt wird, kehren wir zur Startseite zurück.

Ausgang:

Abschluss

Der Event-Listener onClick ist eine weitere Lösung, die entwickelt werden kann, um mehrseitige Anwendungen wie die Methode react-router-dom zu erstellen. Es ist jedoch keine Methode bekannt, auf eine andere Seite umzuleiten, ohne das Paket react-router-dom zu verwenden.