Mittlere Ebene: Routing mit React Router

Routing ist ein entscheidender Aspekt beim Erstellen moderner Webanwendungen. React Router ist eine leistungsstarke Bibliothek, die es Entwicklern ermöglicht, das clientseitige Routing in einer React-Anwendung effizient zu handhaben. Dieser Leitfaden befasst sich mit den Grundlagen der Einrichtung von React Router, der Verwendung wesentlicher Komponenten und der Erkundung fortgeschrittener Routing-Techniken wie verschachtelter Routen, dynamischem Routing, Routenparametern und Route Guards.

Einführung in React Router

Mit React Router können Sie die Navigation und das Rendering verschiedener Komponenten basierend auf der URL verwalten. Es hilft beim Erstellen von Single-Page-Anwendungen (SPAs) mit einem nahtlosen Navigationserlebnis.

React Router einrichten

Um React Router zu verwenden, installieren Sie es mit npm oder Yarn.

npm install react-router-dom

oder

yarn add react-router-dom

Routen-, Switch-, Link- und NavLink-Komponenten

React Router bietet mehrere Kernkomponenten zum Definieren von Routen und zum Verwalten der Navigation.

Routenkomponente

Die Route-Komponente wird verwendet, um einen Pfad zu definieren und ihn einer Komponente zuzuordnen.

Beispiel:

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

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

In diesem Beispiel wird die Home-Komponente gerendert, wenn der Pfad / ist, und die About-Komponente wird gerendert, wenn der Pfad /about ist.

Komponente wechseln

Die Switch-Komponente stellt sicher, dass nur die erste passende Route gerendert wird.

Beispiel:

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

Wenn in diesem Beispiel keine Routen übereinstimmen, wird die NotFound-Komponente gerendert.

Link-Komponente

Die Link-Komponente erstellt Navigationslinks in Ihrer Anwendung, ähnlich wie Anker-Tags (), jedoch ohne Neuladen der Seite.

Beispiel:

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

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

export default App;

In diesem Beispiel navigiert ein Klick auf die Links zu den jeweiligen Routen, ohne dass die Seite neu geladen werden muss.

NavLink-Komponente

Die NavLink-Komponente ähnelt der Link-Komponente, bietet jedoch zusätzliche Styling-Funktionen basierend auf der aktiven Route.

Beispiel:

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

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

In diesem Beispiel wendet die activeClassName-Requisite die aktive Klasse auf den Link an, der der aktuellen Route entspricht.

Erweiterte Routing-Techniken

Verschachtelte Routen

Mit verschachtelten Routen können Sie Routen innerhalb anderer Routen erstellen und so eine hierarchische Navigationsstruktur ermöglichen.

Beispiel:

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

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

In diesem Beispiel enthält die Komponente „Themen“ verschachtelte Routen, die ein Unternavigationssystem innerhalb des Abschnitts „Themen“ ermöglichen.

Dynamisches Routing

Dynamisches Routing ermöglicht es Ihnen, Routen basierend auf dynamischen Parametern wie Benutzer-IDs oder Produkt-IDs zu erstellen.

Beispiel:

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

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

In diesem Beispiel wird die Benutzerkomponente mit der als Routenparameter übergebenen Benutzer-ID gerendert.

Routenparameter

Mit Routenparametern können Sie Werte aus der URL erfassen und in Ihren Komponenten verwenden.

Beispiel:

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

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

In diesem Beispiel verwendet die Produktkomponente den Routenparameter „productId“, um die Produkt-ID anzuzeigen.

Routenwächter und Weiterleitungen

Routenwächter und Weiterleitungen helfen Ihnen, den Zugriff auf bestimmte Routen basierend auf Bedingungen, wie z. B. der Benutzerauthentifizierung, zu kontrollieren.

Schutz von Routen

Um Routen zu schützen, können Sie eine Komponente höherer Ordnung (HOC) erstellen, die vor dem Rendern der Komponente eine Bedingung (z. B. Benutzerauthentifizierung) prüft.

Beispiel:

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

const isAuthenticated = false;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

In diesem Beispiel prüft die PrivateRoute-Komponente, ob der Benutzer authentifiziert ist, bevor die Dashboard-Komponente gerendert wird. Wenn der Benutzer nicht authentifiziert ist, wird er zur Anmeldekomponente weitergeleitet.

Implementieren von Weiterleitungen im React Router

Weiterleitungen können mithilfe der Redirect-Komponente implementiert werden, um Benutzer programmgesteuert zu einer anderen Route zu navigieren.

Beispiel:

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

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);



export default App;

In diesem Beispiel wird der Benutzer durch den Besuch von /old-page automatisch zu /new-page weitergeleitet.

Abschluss

Das Verstehen und Implementieren des Routings mit React Router ist für die Erstellung robuster React-Anwendungen unerlässlich. Indem Sie die Grundlagen des Einrichtens von Routen beherrschen, die Navigation mit Link und NavLink verwalten und erweiterte Techniken wie verschachtelte Routen, dynamisches Routing, Routenparameter und Routenwächter implementieren, können Sie in Ihren Anwendungen nahtlose und sichere Navigationserlebnisse schaffen. Diese Konzepte bilden die Grundlage für Ihre Fähigkeit, mit React anspruchsvolle Single-Page-Anwendungen zu erstellen, während Sie Ihre Fähigkeiten weiterentwickeln.

Das obige ist der detaillierte Inhalt vonMittlere Ebene: Routing mit React Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!