Navigieren mit React Router React Js Teil A Leitfaden zum Routing in React-Anwendungen

Willkommen zurück zu unserer React-Reihe! In früheren Beiträgen haben wir wesentliche Konzepte wie Komponenten, Status, Requisiten und Ereignisbehandlung behandelt. Jetzt ist es an der Zeit, das Routing in React-Anwendungen mithilfe von React Router zu erkunden. Routing ermöglicht Ihnen die Navigation zwischen verschiedenen Ansichten oder Komponenten innerhalb Ihrer App und sorgt so für ein nahtloses Benutzererlebnis ?.

Was ist React Router?

React Router ist eine leistungsstarke Bibliothek, die Routing in React-Anwendungen ermöglicht. Sie können damit mehrere Routen in Ihrer Anwendung definieren und bestimmte Komponenten basierend auf dem URL-Pfad rendern. Diese Funktion ist entscheidend für die Erstellung von Single-Page-Anwendungen (SPAs), bei denen für die Navigation kein Neuladen der gesamten Seite erforderlich ist.

React Router installieren
Um zu beginnen, müssen Sie React Router installieren. Sie können dies mit npm:
tun

npm install react-router-dom

Grundlegendes Routing einrichten

Lassen Sie uns eine einfache Anwendung mit mehreren Routen einrichten. Wir erstellen eine Anwendung mit einer Homepage, einer About-Seite und einer Kontaktseite.

1. Erstellen Sie Basiskomponenten
Erstellen Sie zunächst drei Komponenten: Startseite, Info und Kontakt.

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

2. Richten Sie den Router ein
Nun richten wir den Router in Ihrer Hauptanwendungsdatei ein, normalerweise App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        <Router>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                </ul>
            </nav>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
            </Switch>
        </Router>
    );
};

export default App;

Erklärung:

• Router: Die BrowserRouter-Komponente umschließt die gesamte Anwendung und ermöglicht so das Routing.
• Link: Die Link-Komponente wird verwendet, um Navigationslinks zu erstellen, die die URL ändern, ohne die Seite neu zu laden.
• Route: Die Route-Komponente definiert einen Pfad und die Komponente, die gerendert werden soll, wenn der Pfad übereinstimmt.
• Switch: Die Switch-Komponente stellt sicher, dass jeweils nur eine Route gerendert wird.

Navigieren zwischen Seiten
Nachdem die Einrichtung abgeschlossen ist, können Sie nun zwischen den Seiten „Startseite“, „Info“ und „Kontakt“ navigieren, indem Sie auf die Links im Navigationsmenü klicken. React Router verarbeitet die URL-Änderungen und rendert die entsprechende Komponente, ohne die Seite zu aktualisieren.

Routenparameter
Sie können Routen auch mit Parametern definieren und so dynamische Daten übergeben. Erstellen wir beispielsweise eine Benutzerkomponente, die Benutzerinformationen basierend auf der Benutzer-ID in der URL anzeigt.

1. Erstellen Sie die Benutzerkomponente
User.js:

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

const User = () => {
    const { userId } = useParams();
    return <h1>User ID: {userId}</h1>;
};

export default User;

2. Aktualisieren Sie den Router
Fügen Sie eine Route für die Benutzerkomponente in Ihrem App.js hinzu:

<Route path="/user/:userId" component={User} />

Verschachtelte Routen

React Router unterstützt auch verschachtelte Routen, die es Ihnen ermöglichen, untergeordnete Routen innerhalb einer übergeordneten Komponente zu rendern. Dies ist nützlich für die Erstellung komplexer Layouts.

Beispiel für verschachtelte Routen:

1. Erstellen Sie eine Dashboard-Komponente mit verschachtelten Routen:

npm install react-router-dom

1. Aktualisieren Sie Ihre App.js, um die Dashboard-Route einzuschließen:

// Home.js
import React from 'react';

const Home = () => {
    return <h1>Home Page</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>About Page</h1>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return <h1>Contact Page</h1>;
};

export default Contact;

Wenn Sie jetzt zu /dashboard/profile oder /dashboard/settings navigieren, werden die entsprechenden Komponenten im Dashboard angezeigt.

In diesem Beitrag haben wir untersucht, wie man Routing in einer React-Anwendung mithilfe von React Router implementiert. Wir haben das Einrichten des grundlegenden Routings, das Navigieren zwischen Seiten, die Verwendung von Routenparametern und das Erstellen verschachtelter Routen behandelt.

Mit diesen Konzepten können Sie ein strukturiertes Navigationssystem für Ihre React-Anwendungen erstellen, das Benutzererlebnis verbessern und eine dynamische Inhaltswiedergabe ermöglichen.

Im nächsten Beitrag befassen wir uns mit der Verwendung von React Hooks und konzentrieren uns dabei auf useEffect und darauf, wie damit Nebenwirkungen in Funktionskomponenten verwaltet werden können. Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonNavigieren mit React Router React Js Teil A Leitfaden zum Routing in React-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!