Bagaimana untuk Mencipta Laluan Bersarang dalam React Router v4/v5?

Laluan Bersarang dengan Penghala React v4/v5

Laluan bersarang membolehkan anda mencipta struktur hierarki untuk navigasi dalam aplikasi React anda. Dalam React Router v4 dan v5, anda boleh mencapai ini dengan menggunakan dan komponen.

Contoh

Pertimbangkan contoh berikut, di mana kami ingin membahagikan aplikasi kami kepada bahagian hadapan dan pentadbir.

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

Dalam contoh di atas, < pertama ;Padan> definisi mentakrifkan laluan bahagian hadapan, manakala yang kedua mentakrifkan laluan pentadbir. Setiap laluan dikaitkan dengan komponen yang harus dipaparkan apabila laluan itu diakses.

Pertimbangan

Dalam Penghala Reaksi v4, anda tidak meletakkan komponen. Sebaliknya, anda meletakkannya dalam yang lain. Contohnya:

<Route path="/topics" component={Topics} />

Hendaklah menjadi:

<Route path="/topics" component={Topics} />

Dan komponen Topik akan ditakrifkan seperti berikut:

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic} />
  </div>
);

Struktur ini membolehkan lebih fleksibiliti dan kawalan ke atas penghalaan aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Laluan Bersarang dalam React Router v4/v5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!