Bagaimana anda menentukan laluan menggunakan & lt; route & gt; komponen?

Bagaimana anda menentukan laluan menggunakan komponen ?

Untuk menentukan laluan menggunakan komponen <route></route> dalam Router React, anda terutamanya menggunakannya dalam komponen penghala, seperti <browserrouter></browserrouter> atau <hashrouter></hashrouter> . Komponen <route></route> bertanggungjawab untuk memberikan UI apabila path sepadan dengan URL semasa. Inilah cara menggunakannya:

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

Dalam contoh ini, tiga laluan ditakrifkan:

• Laluan rumah ("/") akan menjadikan komponen Home .
• Mengenai laluan ("/kira -kira") akan menjadikan komponen About .
• Laluan kenalan ("/kenalan") akan menjadikan komponen Contact .

Komponen <route></route> boleh digunakan dengan cara yang berbeza untuk lulus komponen yang akan diberikan:

• Menggunakan component prop secara langsung seperti yang ditunjukkan di atas.
• Menggunakan render Prop, yang membolehkan anda untuk menjadikan komponen dengan prop tambahan.
• Menggunakan prop children , yang boleh menyebabkan komponen tanpa mengira sama ada laluannya sepadan dengan URL semasa.

Apakah alat peraga yang berbeza yang boleh digunakan dengan komponen ?

Komponen <route></route> dalam Router React menyokong beberapa alat yang menentukan tingkah laku dan logiknya. Berikut adalah alat utama:

• path : Rentetan atau pelbagai rentetan yang harus dipadankan dengan laluan. Jika tidak ditentukan, laluan akan sentiasa sepadan.
• component : Komponen React untuk membuat apabila lokasi sepadan dengan path . Prop ini saling eksklusif dengan render dan children .
• render : Fungsi yang mengembalikan elemen React untuk membuat apabila lokasi sepadan. Berguna apabila anda perlu lulus prop tambahan kepada komponen atau perlu melakukan rendering dalam talian.
• children : Fungsi yang mengembalikan elemen React. Ia menjadikan sama ada laluan itu sepadan dengan jalan, menjadikannya berguna untuk animasi atau situasi lain di mana anda ingin memberikan sesuatu tanpa mengira lokasi semasa.
• exact : Boolean yang, apabila benar, akan membuat laluan sepadan hanya jika laluan URL keseluruhan sepadan, bukan hanya awalan.
• strict : Boolean yang, apabila benar, akan membuat slash trailing di path yang signifikan.
• location : Objek yang mewakili lokasi semasa. Ini biasanya digunakan untuk router bersarang.
• sensitive : Boolean yang, apabila benar, akan menjadikan laluan kes-sensitif.

Menggunakan alat ini, anda boleh mengkonfigurasi komponen <route></route> agar sesuai dengan pelbagai keperluan penghalaan dalam aplikasi anda.

Bagaimanakah komponen mengendalikan laluan bersarang?

Komponen <route></route> dalam React Router menyokong laluan bersarang melalui konsep penghalaan bersarang, yang membolehkan struktur penghalaan yang lebih kompleks dan teratur. Berikut adalah cara anda boleh melaksanakan laluan bersarang:

1. Tentukan laluan induk : Mulakan dengan menentukan laluan utama yang akan mengandungi laluan bersarang.
2. Gunakan children Prop : Dalam komponen laluan induk, anda boleh menggunakan komponen <route></route> tambahan untuk menentukan laluan bersarang. Ini boleh dilakukan dengan menggunakan children prop atau dengan menentukan laluan bersarang secara langsung dalam komponen induk.

Berikut adalah contoh penghalaan bersarang:

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

Dalam contoh ini, laluan /users membuat komponen Users , yang kemudian menggunakan <route></route> bersarang untuk menentukan laluan untuk pengguna tertentu (misalnya, /users/user1 ). Objek match , diluluskan sebagai prop, membantu membina URL relatif untuk laluan bersarang.

Bolehkah anda menerangkan cara menggunakan komponen 'tepat' dengan komponen ?

Prop exact digunakan dengan komponen <route></route> untuk memastikan laluan laluan sepadan dengan keseluruhan laluan URL, bukan hanya sepadan dengan permulaannya. Ini amat berguna apabila anda ingin mengelakkan perlawanan yang tidak disengajakan.

Berikut adalah cara anda boleh menggunakan prop exact :

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

Dalam contoh ini:

• Laluan dengan jalan "/" menggunakan prop exact . Ini bermakna ia hanya sepadan dengan URL akar ( "/" ) dan bukan URL seperti "/about" .
• Tanpa prop exact , laluan rumah ( "/" ) juga sepadan dengan URL seperti "/about" , yang biasanya bukan apa yang anda mahukan.

Prop exact menjadi sangat penting apabila menentukan laluan yang lebih spesifik di bawah yang lebih umum. Sebagai contoh, jika anda mempunyai laluan untuk papan pemuka ( "/dashboard" ) dan satu lagi untuk bahagian tertentu dalam papan pemuka ( "/dashboard/settings" ), anda mungkin mahu laluan papan pemuka exact untuk mengelakkannya daripada memadankan laluan tetapan juga.

Ringkasnya, prop exact memastikan pemadanan tepat laluan laluan ke URL semasa, mengelakkan perlawanan yang tidak diingini dengan laluan yang lebih spesifik.

Atas ialah kandungan terperinci Bagaimana anda menentukan laluan menggunakan & lt; route & gt; komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!