ReactJS - BrowserRouter: Ein Anfängerleitfaden zum Routing in React

Hallo da draußen, ambitionierte React-Entwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt des Routings in React-Anwendungen. Keine Sorge, wenn du neu im Programmieren bist; ich werde dein freundlicher Guide sein und alles Schritt für Schritt erklären. Also hol dir eine Tasse Kaffee und tauchen wir ein!

ReactJS - BrowserRouter

Router-Konzepte

Was ist Routing?

Stell dir vor, du bist in einer großen Bibliothek. Du möchtest ein bestimmtes Buch finden, aber du weißt nicht, wo es ist. Da kommt der Bibliothekskatalog ganz praktisch. Er sagt dir genau, auf welcher Regal du schauen musst. In Webanwendungen funktioniert Routing ähnlich. Es ist wie eine Karte, die deiner App sagt, welches Komponente basierend auf der URL angezeigt werden soll.

Warum brauchen wir Routing?

Angenommen, du baust eine persönliche Website mit verschiedenen Seiten: Home, Über mich und Kontakt. Ohne Routing müsstest du manuell Komponenten anzeigen und ausblenden, basierend auf Benutzeraktionen. Das ist mühsam und fehleranfällig. Routing automatisiert diesen Prozess und macht deine App organisierter und benutzerfreundlicher.

BrowserRouter im Einsatz

In der React-Welt haben wir ein fantastisches Werkzeug namens BrowserRouter. Es ist Teil der react-router-dom Bibliothek und hilft uns, Routing in unseren React-Anwendungen zu implementieren. Denk daran als deinen persönlichen Bibliothekar, der immer bereit ist, Benutzer zum richtigen "Buch" (oder in unserem Fall, Komponente) zu führen.

Wie man Router anwendet

Nun, da wir das Konzept verstanden haben, lassen wir uns mit ein wenig Code beschäftigen!

Schritt 1: Installation

Zuerst müssen wir das react-router-dom Paket installieren. Öffne dein Terminal und führe aus:

npm install react-router-dom

Schritt 2: BrowserRouter einrichten

Lassen wir mit dem Wrappen unseres Haupt-App-Komponenten mit BrowserRouter beginnen. So geht's:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

In diesem Beispiel importieren wir BrowserRouter und benennen es für die Einfachheit in Router um. Wir wickeln dann unseren App Komponenten mit Router ein. Dies richtet den Routing-Kontext für unsere gesamte Anwendung ein.

Schritt 3: Routen definieren

Jetzt definieren wir einige Routen in unserer App Komponente:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Lassen wir das auseinandernehmen:

Wir importieren Route und Switch aus react-router-dom.
Switch stellt sicher, dass nur eine Route gleichzeitig gerendert wird.
Jeder Route Komponente definiert eine Zuordnung zwischen einem URL-Pfad und einer React-Komponente.
Die exact Eigenschaft auf der Home-Route stellt sicher, dass sie nur auf den exakten Pfad "/" passt.

Schritt 4: Navigation erstellen

Jetzt fügen wir unserer App einige Navigation hinzu:

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">Über mich</Link></li>
<li><Link to="/contact">Kontakt</Link></li>
</ul>
</nav>
);

export default Navigation;

Hier verwenden wir das Link Komponente aus react-router-dom. Es ist wie ein <a> Tag, aber es verhindert, dass die Seite bei der Navigation neu geladen wird.

Schritt 5: Alles zusammenfügen

Lassen wir unseren App Komponenten aktualisieren, um die Navigation zu enthalten:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Und daar hast du es! Eine grundlegende React-Anwendung mit Routing eingerichtet.

Fortgeschrittene Routing-Techniken

Nun, da wir die Grundlagen abgedeckt haben, schauen wir uns einige fortgeschrittene Techniken an:

1. URL-Parameter

Manchmal möchtest du Daten über die URL übergeben. Zum Beispiel eine Benutzerprofilseite:

<Route path="/user/:id" component={UserProfile} />

In deinem UserProfile Komponenten kannst du den id Parameter如此 zugreifen:

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

const UserProfile = () => {
let { id } = useParams();
return <h1>Benutzerprofil für Benutzer {id}</h1>;
};

2. Geschachtelte Routen

Du kannst Routen in Komponenten verschachteln. Dies ist nützlich für komplexe Layouts:

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Benutzer</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. Programmatische Navigation

Manchmal möchtest du programmatisch navigieren, wie nach einer Formularübersendung:

import { useHistory } from 'react-router-dom';

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... Login-Logik behandeln
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* Formularfelder */}
</form>
);
};

Routing-Methode-Tabelle

Hier ist eine praktische Tabelle, die die Haupt-routing-Methoden zusammenfasst, die wir besprochen haben:

Methode	Zweck	Beispiel
`<BrowserRouter>`	Wraps the app to enable routing	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	Defines a route	`<Route path="/about" component={About} />`
`<Switch>`	Ensures only one route renders	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	Creates a link to a route	`<Link to="/about">Über mich</Link>`
`useParams()`	Accesses URL parameters	`let { id } = useParams();`
`useHistory()`	Programmatic navigation	`history.push('/dashboard');`

Und daar hast du es, Leute! Wir haben die Grundlagen des Routings in React mit BrowserRouter durchlaufen. Denke daran, Übung macht den Meister, also fürchte dich nicht, diese Konzepte in deinen eigenen Projekten auszuprobieren.

Frohes Coden und möge deine Routen dich immer zum richtigen Komponenten führen!

Credits: Image by storyset