Übergeben Sie mithilfe von React Router Requisiten an die Handler-Komponente

1. Übergeben Sie Requisiten mit React Router an eine andere Komponente
2. Abschluss

Der React-Router führt die primäre Funktion aus, eine Webseite mit der anderen zu verknüpfen. Beim Erstellen mehrseitiger Apps wenden wir den React-Router an, um die Seiten miteinander zu verknüpfen.

Der React-Router erfüllt jedoch eine andere Funktion. Es kann auch Status oder props{property} von einem Link zu einem anderen weitergeben.

Mit diesem Ansatz können wir einen Link verwenden, um den Status eines anderen Links zu steuern oder einen Teil der Elemente einer Seite für eine andere freizugeben, ohne den gesamten Inhalt der vorherigen Seite zu rendern.

Übergeben Sie Requisiten mit React Router an eine andere Komponente

Zum Beispiel möchten wir eine Stütze übergeben, die die URL der Seite 5-Komponente von der Seite 4-Komponente mithilfe des React Routers anpasst.

Wir erstellen einen neuen Projektordner und installieren React Router mit npm install respond-router und dann Router DOM mit npm install respond-router-dom. Dann erstellen wir einen Ordner und nennen ihn Seiten, dann erstellen wir zwei Komponenten, Seite4.js und Seite5.js.

Dann beginnen wir mit der Codierung der Datei App.js wie folgt:

Code-Snippet – App.js:

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';

function App(props) {
  return (
    <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<Page4/>} />
      <Route exact path="/page4" element={<Page4 />} />
      <Route path="/page5/:type" element={<Page5/>} />
      </Routes>

    </BrowserRouter>
  );
}
export default App;

Hier verknüpfen wir beide Komponenten mit der App.js und sorgen dann dafür, dass die Page5-Seite mit dem :type-Attribut jede Art von Prop akzeptiert.

Dann fügen wir diese Codes in die Datei Page4.js ein.

Code-Snippet – Page4.js:

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

function Page4(props) {
    return (
        <div>
            <h1>Title of Page 4</h1>
            <hr />
            <Link to={{
                pathname: "/page5/parameter-data",
                state: { stateParam: true }
            }}>Move to Next Page</Link>
        </div>
    );
}

export default Page4;

Beim Verlinken von Seite4 auf Seite5 haben wir auch einen Status hinzugefügt, der die URL aktualisiert. Normalerweise wird nur http://localhost:3000/page5 angezeigt, aber jetzt sollte es Folgendes anzeigen: http://localhost:3000/page5/parameter-data, wie wir es von Page4 hinzugefügt haben.

Dann erstellen wir in Seite5 Codes, die es zurück zu Seite4 verlinken, so wie hier.

Code-Snippet – Page5.js:

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

function Page5(props) {
    const { type } = useParams();
    return (
        <div>
            <h1>Title of Page 5</h1>
            <hr />
            <Link to={"/page4"}>Move to Prev Page</Link>
        </div>
    );
}

export default Page5;

Und wir haben auch den const {type} hinzugefügt, um die Requisiten von Page4 zu erhalten.

Ausgang:

Abschluss

Dieser Ansatz kann sich als effizient erweisen, wenn wir eine herausragende Funktion oder Requisiten hinzufügen möchten, die wir nicht in einem Heuhaufen von Codes verlieren möchten. Wir könnten also eine separate Komponente dafür erstellen und sie mit der gewünschten Seite verknüpfen, während wir die Stütze oder den Zustand übergeben.