Bagaimana untuk Menghantar Props kepada Paparan Baharu dalam Penghala Reaksi?

Melalui Props dalam Link React-Router

Isu:

Dalam aplikasi React-Router, komponen Pautan ialah tidak menghantar sifat kepada paparan baharu, walaupun sifat tersebut disertakan dalam parameter Pautan.

Penyelesaian:

Kod Lapuk (v1):

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

<Route name="ideas" handler={CreateIdeaView} />

Kod Terkini (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} />

Penggunaan:

• Harta kepada <Pautan> mengambil objek dengan sifat berikut:

  • nama laluan: Laluan paparan baharu.
  • params: Objek yang mengandungi sifat yang akan dihantar ke paparan baharu.
• Komponen Laluan mesti mempunyai sifat laluan yang sepadan dengan nilai parameter dinamik dalam sifat kepada.

Contoh Komponen Fungsian:

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

Nota: Kod di atas menggunakan cangkuk dari react-router-dom.

Contoh Kod Kemas Kini:

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

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Props kepada Paparan Baharu dalam Penghala Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!