Wie definieren Sie Routen mit der & lt; Route & gt; Komponente?

Wie definieren Sie Routen mithilfe der -Komponente?

Um Routen mithilfe der <route></route> -Komponente im React -Router zu definieren, verwenden Sie sie hauptsächlich in einer Routerkomponente, wie <browserrouter></browserrouter> <hashrouter></hashrouter> Die <route></route> -Komponente ist für die Rendern der Benutzeroberfläche verantwortlich, wenn ihr path der aktuellen URL entspricht. Hier erfahren Sie, wie man es benutzt:

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> </div> </browserrouter> ); }</code>

In diesem Beispiel werden drei Routen definiert:

• Die Heimroute ("/") wird die Home rendern.
• Die About -Route ("/über") wird die About rendern.
• Die Kontaktroute ("/contact") rendert die Contact .

Die <route></route> -Komponente kann auf verschiedene Weise verwendet werden, um die zu rendere Komponente zu übergeben:

• Verwenden Sie die component direkt wie oben gezeigt.
• Verwenden der render -Requisite, mit der Sie eine Komponente mit zusätzlichen Requisiten inline inlinieren können.
• Verwenden der children -Requisiten, die eine Komponente machen kann, unabhängig davon, ob sein Pfad der aktuellen URL entspricht.

Was sind die verschiedenen Requisiten, die mit der -Komponente verwendet werden können?

Die <route></route> -Komponente im React -Router unterstützt mehrere Requisiten, die sein Verhalten definieren und die Logik rendern. Hier sind die Hauptquellen:

• path : Eine Zeichenfolge oder eine Reihe von Zeichenfolgen, mit denen die Route übereinstimmen sollte. Wenn nicht angegeben, stimmt die Route immer überein.
• component : Eine React -Komponente zum Rendern, wenn der Ort mit dem path übereinstimmt. Diese Requisite schließt sich gegenseitig mit render und children aus.
• render : Eine Funktion, die ein React -Element zum Rendern zurückgibt, wenn der Standort übereinstimmt. Nützlich, wenn Sie zusätzliche Requisiten an die Komponente weitergeben oder Inline -Rendering durchführen müssen.
• children : Eine Funktion, die ein React -Element zurückgibt. Es wird getroffen, ob die Route dem Pfad entspricht oder nicht, was sie für Animationen oder andere Situationen nützlich macht, in denen Sie etwas unabhängig vom aktuellen Standort etwas rendern möchten.
• exact : Ein Boolescher, der, wenn er wahr ist, die Route nur übereinstimmen, wenn der gesamte URL -Pfad nicht nur ein Präfix entspricht.
• strict : Ein Boolean, der, wenn er stimmt, den nachverfolgenden Schrägstrich im path erheblich macht.
• location : Ein Objekt, das den aktuellen Ort darstellt. Dies wird normalerweise für verschachtelte Router verwendet.
• sensitive : Ein Boolescher, der, wenn er stimmt, die Route fallempfindlich macht.

Mit diesen Requisiten können Sie die <route></route> -Komponente so konfigurieren, dass sie verschiedene Routing -Anforderungen in Ihre Anwendung entsprechen.

Wie handelt die -Komponente verschachtelte Routen?

Die <route></route> -Komponente im React -Router unterstützt verschachtelte Routen durch das Konzept des verschachtelten Routings, das komplexere und organisierte Routing -Strukturen ermöglicht. So können Sie verschachtelte Routen umsetzen:

1. Definieren Sie die übergeordnete Route : Beginnen Sie zunächst die Hauptroute, die die verschachtelten Routen enthalten.
2. Verwenden Sie die children : In der Komponente der übergeordneten Route können Sie zusätzliche <route></route> -Komponenten verwenden, um die verschachtelten Routen zu definieren. Dies kann durch die Verwendung der children oder durch Definieren der verschachtelten Routen direkt innerhalb der übergeordneten Komponente erfolgen.

Hier ist ein Beispiel für verschachteltes Routing:

 <code class="jsx">import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/users" component="{Users}"></route> </div> </browserrouter> ); } function Users({ match }) { return ( <div> <h2>Users</h2> <ul> <li>
<link to="{`${match.url}/user1`}">User1</li> <li>
<link to="{`${match.url}/user2`}">User2</li> </ul> <route path="{`${match.path}/:userId`}" component="{User}"></route> </div> ); } function User({ match }) { return <h3>User {match.params.userId}</h3>; }</code>

In diesem Beispiel rendert die Route /users die Users , die dann eine verschachtelte <route></route> verwendet, um eine Route für bestimmte Benutzer zu definieren (z. B. /users/user1 ). Das als Requisiten übergebene match -Objekt hilft, relative URLs für die verschachtelten Routen zu konstruieren.

Können Sie erklären, wie Sie die "exakte" Requisite mit der -Komponente verwenden?

Die exact Requisite wird mit der <route></route> -Komponente verwendet, um sicherzustellen, dass der Routenpfad mit dem gesamten URL -Pfad übereinstimmt, anstatt nur den Beginn davon abzustimmen. Dies ist besonders nützlich, wenn Sie unbeabsichtigte Übereinstimmungen vermeiden möchten.

So können Sie die exact Stütze verwenden:

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> </div> </browserrouter> ); }</code>

In diesem Beispiel:

• Die Route mit dem Pfad "/" verwendet die exact Prop. Dies bedeutet, dass es nur mit der Root -URL ( "/" ) und nicht der URLs wie "/about" übereinstimmt.
• Ohne die exact Requisite würde die Heimroute ( "/" ) auch URLs wie "/about" übereinstimmen, was normalerweise nicht das ist, was Sie wollen.

Die exact Propie wird besonders wichtig, wenn Sie spezifischere Routen unter einem allgemeineren definieren. Wenn Sie beispielsweise eine Route für ein Dashboard ( "/dashboard" ) und eine andere für einen bestimmten Abschnitt innerhalb des Dashboards ( "/dashboard/settings" ) haben, möchten Sie möglicherweise, dass die Route des Dashboard -Route exact verwendet wird, um zu verhindern, dass sie auch der Route der Einstellungen entspricht.

Zusammenfassend lässt sich sagen, dass die exact Requisite eine präzise Übereinstimmung des Routenpfads zur aktuellen URL sorgt und unbeabsichtigte Übereinstimmungen mit spezifischeren Pfaden vermeidet.

Das obige ist der detaillierte Inhalt vonWie definieren Sie Routen mit der & lt; Route & gt; Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!