Bagaimanakah anda menstruktur laluan bersarang dalam React Router v4 dan v5?

Laluan Bersarang dalam Penghala Reaksi

Dalam React Router versi 4 dan 5, laluan bersarang melibatkan pendekatan yang sedikit berbeza. Daripada bersarang komponen, anda meletakkannya dalam yang lain.

Contohnya, konfigurasi laluan bersarang berikut:

<match pattern="/" component="{Frontpage}">
  <match pattern="/home" component="{HomePage}"></match>
  <match pattern="/about" component="{AboutPage}"></match>
</match>
<match pattern="/admin" component="{Backend}">
  <match pattern="/home" component="{Dashboard}"></match>
  <match pattern="/users" component="{UserPage}"></match>
</match>
<miss component="{NotFoundPage}"></miss>

Hendaklah berstruktur seperti berikut:

<route path="/" component="{Frontpage}"></route>
<route path="/admin" component="{Backend}"></route>

Dalam komponen, anda boleh mentakrifkan laluan anak sebagai subkomponen komponen induk, seperti yang ditunjukkan dalam contoh ini:

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <link to="{`${match.url}/home`}">
    <link to="{`${match.url}/about`}">
    <route path="{`${match.path}/home`}" component="{HomePage}"></route>
    <route path="{`${match.path}/about`}" component="{AboutPage}"></route>
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <link to="{`${match.url}/home`}">
    <link to="{`${match.url}/users`}">
    <route path="{`${match.path}/home`}" component="{Dashboard}"></route>
    <route path="{`${match.path}/users`}" component="{UserPage}"></route>
  </div>
);</code>

Struktur yang disemak ini memastikan bahawa /home dalam komponen frontend boleh diakses di /, manakala /admin/ rumah dalam komponen bahagian belakang boleh diakses di /admin/home.

Atas ialah kandungan terperinci Bagaimanakah anda menstruktur laluan bersarang dalam React Router v4 dan v5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!