Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie übergebe ich Requisiten an eine neue Ansicht im React Router?

Barbara Streisand
Freigeben: 2024-11-01 06:10:02
Original
186 Leute haben es durchsucht

How to Pass Props to a New View in React Router?

Übergabe von Requisiten in Link React-Router

Problem:

In einer React-Router-Anwendung ist eine Link-Komponente vorhanden Es werden keine Eigenschaften an eine neue Ansicht übergeben, obwohl die Eigenschaften in den Parametern des Links enthalten sind.

Lösung:

Veralteter Code (v1):

<Link to="ideas" params={{ testvalue: "hello" }}></Link>

<Route name="ideas" handler={CreateIdeaView} />
Nach dem Login kopieren

Aktueller Code (v4/v5):

// Using query
<Link to={{ pathname: `/${this.props.testvalue}`, query: { backUrl } }} />

// Using search
<Link to={{ pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}` }} />

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />
Nach dem Login kopieren

Verwendung:

  • Die to-Eigenschaft des Nimmt ein Objekt mit den folgenden Eigenschaften:

    • Pfadname: Der Pfad der neuen Ansicht.
    • params: Ein Objekt, das die Eigenschaften enthält, die an die neue Ansicht übergeben werden sollen.
  • Die Route-Komponente muss über eine Pfadeigenschaft verfügen, die mit dem Wert des dynamischen Parameters in der to-Eigenschaft übereinstimmt.

Beispiel für eine Funktionskomponente:

<code class="js">const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>
Nach dem Login kopieren

Hinweis: Der obige Code verwendet Hooks von React-Router-Dom.

Aktualisiertes Codebeispiel:

<code class="js">const App = () => {
  return (
    <React.Fragment>
      <Link to={{ pathname: '/ideas/:itemID', itemID: 222, item: { okay: 123 } }}>Ideas</Link>
      <Switch>
        <Route exact path="/ideas/:itemID/" component={Ideas} />
        <Route path="/hello/:WORLD?/:thing?" component={World} />
      </Switch>
    </React.Fragment>
  );
};</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten an eine neue Ansicht im React Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!