URL-Formatierung und Routing in React – Eine Anleitung zur Verwendung React Router

In einer React-Anwendung spielt die URL-Formatierung routing eine entscheidende Rolle bei der Navigation auf Seiten und der Anzeige entsprechender Inhalte. Zur Verwaltung routing in React können wir die Bibliothek verwenden. Hier finden Sie eine grundlegende Anleitung zum Formatieren und Bearbeiten von URLs in Ihrer React-Anwendung. React Router React Router routing

 

Installieren React Router

Öffnen Sie Ihr Projektverzeichnis im Terminal und führen Sie zur Installation den folgenden Befehl aus: React Router npm install react-router-dom

Importieren Sie die erforderlichen Komponenten in Ihre React-Komponente. React Router

 

Routen definieren

Verwenden Sie die Komponente, um Ihre React-Anwendung zu umschließen und ein Basis-URL-Format festzulegen. <BrowserRouter>

Verwenden Sie die <Route> Komponente, um Routen in Ihrer Anwendung zu definieren.

Beispiel:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

Definiere Link s

Verwenden Sie die Komponente, um Navigationss in Ihrer Anwendung zu erstellen. <Link> link

Beispiel:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

Zugriffspfadparameter

Verwenden Sie die <Route> Komponente mit einem path Attribut im Format /users/:id, um auf Pfadparameter zuzugreifen.

Innerhalb der durch definierten Komponente <Route> können Sie über useParams() auf die Werte von Pfadparametern zugreifen.

Beispiel:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

Verwenden Switch und Redirect

Verwenden Sie die Komponente, um nur die erste Route zu rendern, die dem Pfad entspricht. <Switch>

Verwenden Sie die Komponente, um Benutzer von einem angegebenen Pfad zu einem anderen zu bewegen. <Redirect> redirect

Beispiel:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

Dies sind einige grundlegende Konzepte der URL-Formatierung und routing der Verwendung von. Durch die Verwendung können Sie flexible React-Anwendungen mit der Möglichkeit erstellen, verschiedene Inhalte basierend auf der URL zu navigieren und anzuzeigen. React Router React Router