React Link zu einer anderen Seite in React

1. Links in Reaktion
2. Verwenden Sie das Paket react-router-dom, um in React auf eine andere Seite umzuleiten

Links sind überall im Internet zu finden. Sie sind entscheidend für die Entdeckung von Ressourcen wie Webseiten, Fotos und Videos, ganz zu schweigen von ihrer Bedeutung für die Suchmaschinenoptimierung.

Das Routing bestimmt, welcher Code ausgeführt werden soll, wenn eine URL besucht wird. In diesem Artikel erfahren Sie, wie das Routing von React funktioniert.

Links in Reaktion

Wie unten dargestellt, werden Links in gewöhnlichen Apps, die keine Bibliothek wie React verwenden, mit einem Anker-Tag erstellt.

<a href="https://Youtube.com">Go To Youtube</a>

Denken Sie daran, dass dies auch in React funktioniert. Diese Routing-Strategie löst eine vollständige Seitenaktualisierung aus, wenn das einzige, was sich auf der neuen Route ändert, möglicherweise ein Bild und etwas Text ist.

Eine vollständige Seitenaktualisierung ist in manchen Situationen vorteilhaft, aber selten erforderlich.

Bibliotheken wie React Router verwenden dies, um Ihre App Komponenten rendern zu lassen, die abhängig von einer bestimmten Route neu gerendert werden müssen.

Verwenden Sie das Paket react-router-dom, um in React auf eine andere Seite umzuleiten

Schauen wir uns an, wie man das Paket react-router-dom verwendet, um auf eine andere Seite in ReactJS umzuleiten. Der react-router-dom ist ein ReactJS-Paket, mit dem Sie dynamisches Routing auf einer Webseite erstellen können.

Erstellen Sie zunächst eine Reaktions-App und fügen Sie dann verschiedene Komponenten hinzu.

Wir haben zwei Seiten erstellt, Home.jsx und About.jsx.

Code - Home.jsx:

import React from 'react';
import {Link} from 'react-router-dom';

const Home = () => {
  return (<div><h1>Home Page</h1>
      <p>You are in home Page</p><br /><ul>
          <li><Link to = '/'>Home</Link>
        </li><li>
          <Link to = '/about'>About</Link>
        </li></ul>
    </div>);
};
export default Home;

Code - Über.jsx:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is about page</p>
    </div>
  );
};

export default About;

Verwenden Sie das Paket react-router-dom, um das Routing zu implementieren. Dieser Abschnitt implementiert das Paket react-router-dom in unserer React-App.

Dazu müssen wir bestimmte Komponenten aus dem Paket react-router-dom importieren, darunter BrowserRouter,, Routes, und Route.

Wir werden BrowserRouter als Router aliasieren, um die Dinge einfach zu halten. Dann gehen wir jede importierte Komponente einzeln durch.

Der BrowserRouter hält die Benutzeroberfläche mit der URL synchron, indem er die HTML5-Verlaufs-API verwendet. Die Route ist für das Rendern der Benutzeroberfläche verantwortlich, wenn ihr Pfad mit der aktuellen URL übereinstimmt, und Routes zeigt die erste untergeordnete Route oder Umleitung an, die dem Standort entspricht.

Hier ist der Code für die Datei App.js, in der wir das Paket react-router-dom implementieren werden.

Code - App.js:

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

import About from './components/About';
import Home from './components/Home';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path='/' element={
    <Home />} />

          <Route path="/about' element={<About />} /'
        </Routes>
      </Router>
    </>
  );
}

export default App;

Obwohl wir uns mit React verbinden, schreibt der React Router es heimlich um, um zu antworten, und stellt sicher, dass unsere aktuellen URLs weiterhin korrekt funktionieren. Dies bedeutet auch, dass diese Links automatisch aktualisiert werden, wenn Sie Ihre Servereinstellungen so ändern, dass das Ganze nicht mehr benötigt wird.

Wenn Sie auf Über klicken, werden Sie auf die Seite Über weitergeleitet:

Das ist alles. Es wäre hilfreich, wenn Sie jetzt den Begriff React-Links und die effiziente Verwaltung von Routen verstehen würden.