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 pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />

Hendaklah berstruktur seperti berikut:

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

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>
    <Link to={`${match.url}/about`}></Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/users`}></Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </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!