Wie übergebe ich Requisiten an eine neue Ansicht im 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} />

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} />

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>

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>

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!