Junior-Level: Routing mit React Router

Routing ist ein entscheidender Bestandteil beim Erstellen moderner Webanwendungen. React Router ist eine leistungsstarke Bibliothek, mit der Sie das Routing in einer React-Anwendung effektiv verwalten können. Dieser Leitfaden hilft Ihnen, die Grundlagen von React Router zu verstehen, einschließlich der Einrichtung, der Verwendung wesentlicher Komponenten und der Erkundung fortgeschrittener Routing-Techniken wie verschachtelter Routen, dynamischem Routing, Routenparametern und Route Guards.

Einführung in React Router

React Router ermöglicht die Navigation zwischen verschiedenen Komponenten in einer React-Anwendung, sodass Sie eine Single-Page-Anwendung (SPA) mit mehreren Ansichten erstellen können.

React Router einrichten

Um mit React Router zu beginnen, müssen Sie es in Ihrem Projekt installieren. Sie können dies mit npm oder Garn tun.

npm install react-router-dom

oder

yarn add react-router-dom

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

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

Routenkomponente

Die Route-Komponente wird zum Definieren einer Route in Ihrer Anwendung verwendet. Es gibt den Pfad und die Komponente an, die gerendert werden soll, wenn der Pfad übereinstimmt.

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 jeweils nur eine Route gerendert wird. Es rendert die erste Route, die mit der aktuellen URL übereinstimmt.

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 einem Anker-Tag (), jedoch ohne die Seite neu zu laden.

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, was zum Erstellen von Layouts mit Unternavigation nützlich ist.

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 vonJunior-Level: Routing mit React Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!