Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menghantar Props kepada Paparan Baharu dalam Penghala Reaksi?

Bagaimana untuk Menghantar Props kepada Paparan Baharu dalam Penghala Reaksi?

Barbara Streisand
Lepaskan: 2024-11-01 06:10:02
asal
275 orang telah melayarinya

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

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} />
Salin selepas log masuk

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} />
Salin selepas log masuk

Penggunaan:

  • Harta kepada 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 = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();
  console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'));
  return <span>{testvalue} {backurl}</span>;
};</code>
Salin selepas log masuk

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

Contoh Kod Kemas Kini:

<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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan