Aplikasi Web Fullstack Next.js 15 · Pelajaran

Laluan Selari dan Laluan Pintasan

Laksanakan corak UI lanjutan seperti laluan selari untuk bahagian bebas dan laluan pintasan untuk pengalaman seperti modal.

Pelajaran 3 daripada 412 langkah

Laluan Selari dan Laluan Pintasan ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Corak Penghalaan Lanjutan

Selamat datang! Dalam pelajaran ini, kita akan mendalami dua ciri App Router Next.js yang berkuasa: Laluan Selari dan Laluan Pintasan.

Corak ini membantu anda membina antara muka pengguna yang lebih kompleks, fleksibel dan berprestasi tinggi.

Antara Muka Bebas dengan Laluan Selari

Laluan Selari membolehkan anda memaparkan berbilang paparan bebas atau "slot" dalam susun atur yang sama, secara serentak.

Bayangkan papan pemuka dengan bahagian berbeza (contohnya, analitis dan aktiviti terkini) yang dimuatkan secara bebas, atau suapan media sosial dengan bar sisi profil.

Mentakrifkan Slot Laluan Selari

Anda mentakrifkan laluan selari dengan mencipta folder yang diawali dengan @, seperti @team atau @analytics, di dalam direktori susun atur anda.

Setiap folder @slot mengandungi page.js atau route.js sendiri.
Susun atur induk menerima slot ini sebagai prop melalui layout.js.

Struktur Fail Laluan Selari

Beginilah cara anda boleh menyediakan papan pemuka dengan dua slot selari: @users dan @reports. layout.js utama memaparkan kedua-duanya.

Struktur Fail:

app/
├── dashboard/
│   ├── @users/
│   │   └── page.js
│   ├── @reports/
│   │   └── page.js
│   └── layout.js
└── page.js

Kod Susun Atur Laluan Selari

layout.js menerima slot selari sebagai prop dan memaparkannya. Jika slot tidak aktif untuk URL semasa, Next.js boleh memaparkan default.js.

/* app/dashboard/layout.js */
export default function DashboardLayout({ children, users, reports }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>{users}</div>
        <div style={{ flex: 1 }}>{reports}</div>
      </div>
      {children} {/* Renders content of dashboard/page.js if present */}
    </div>
  );
}

/* app/dashboard/@users/page.js */
export default function UsersPage() {
  return (
    <div style={{ border: '1px solid blue', padding: '10px' }}>
      <h2>Users Section</h2>
      <p>List of active users...</p>
    </div>
  );
}

/* app/dashboard/@reports/page.js */
export default function ReportsPage() {
  return (
    <div style={{ border: '1px solid green', padding: '10px' }}>
      <h2>Reports Section</h2>
      <p>Monthly sales report...</p>
    </div>
  );
}

Laluan Pintasan untuk Modal

Laluan Pintasan membolehkan anda "menangkap" laluan daripada susun atur semasa dan memaparkannya sebagai tindanan atau modal tanpa mengubah URL pelayar.

Ciri ini sesuai untuk memaparkan galeri imej, butiran produk atau borang log masuk di atas halaman semasa.

Mentakrifkan Laluan Pintasan

Laluan pintasan menggunakan konvensyen (.), (..) atau (...) untuk memadankan segmen pada tahap berbeza berbanding laluan semasa.

(.)segment: Menangkap segmen pada tahap yang sama.
(..)segment: Menangkap segmen satu tahap di atas.
(...)segment: Menangkap segmen pada tahap direktori akar app.

Memintas Laluan Sejajar

Bayangkan sebuah galeri foto. Apabila anda mengklik foto, bukannya pergi ke /photos/123, modal dibuka tetapi URL kekal sebagai /photos.

Struktur Fail:

app/
├── photos/
│   ├── @modal/(.)[id]/
│   │   └── page.js
│   ├── page.js
│   └── layout.js

Contoh Kod Laluan Pintasan

Berikut ialah contoh ringkas modal foto. Slot @modal menangkap laluan [id] apabila dinavigasi dari /photos, lalu memaparkannya sebagai tindanan.

/* app/photos/page.js */
import Link from 'next/link';

export default function PhotosPage() {
  const photos = [{ id: '1', title: 'Sunset' }, { id: '2', title: 'Mountain' }];
  return (
    <div>
      <h1>My Photos</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
        {photos.map(photo => (
          <Link key={photo.id} href={`/photos/${photo.id}`}>
            <div style={{ border: '1px solid #ccc', padding: '10px', textAlign: 'center' }}>
              <h3>{photo.title}</h3>
              <p>(Click to view)</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

/* app/photos/@modal/(.)[id]/page.js */
export default function PhotoModal({ params }) {
  return (
    <div style={{
      position: 'fixed', top: '0', left: '0', right: '0', bottom: '0',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex',
      justifyContent: 'center', alignItems: 'center'
    }}>
      <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
        <h2>Photo ID: {params.id}</h2>
        <p>This is a modal for photo details.</p>
        <Link href="/photos">Close Modal</Link>
      </div>
    </div>
  );
}

Bila Hendak Menggunakan Setiap Corak

Laluan Selari digunakan untuk memaparkan berbilang bahagian antara muka pengguna yang bebas secara serentak dalam susun atur tetap (contohnya, papan pemuka).

Laluan Pintasan digunakan untuk memaparkan kandungan di atas halaman semasa, biasanya sebagai modal, tanpa mengubah URL asas (contohnya, pemapar imej).

Kedua-duanya menyelesaikan cabaran antara muka pengguna yang berbeza tetapi sama penting!

Cabaran Corak Laluan

Pertimbangkan halaman profil media sosial. Anda mahu memaparkan siaran pengguna di sebelah kiri dan senarai pengikutnya di sebelah kanan, dengan kedua-duanya dikemas kini secara bebas. Selain itu, mengklik siaran sepatutnya membuka paparan penuhnya dalam modal.

Apakah corak penghalaan yang paling sesuai untuk memenuhi dua keperluan antara muka pengguna yang berbeza ini?

Jawab dalam pelajaran interaktif

Ringkasan: Penghalaan Lanjutan

Syabas! Anda telah mempelajari dua ciri App Router Next.js yang berkuasa:

Laluan Selari (folder @slot) untuk memaparkan segmen antara muka pengguna yang bebas bersebelahan.
Laluan Pintasan (konvensyen (.), (..)(...)) untuk menangkap laluan dan memaparkannya sebagai tindanan atau modal.

Corak ini membuka peluang kepada gubahan antara muka pengguna lanjutan untuk aplikasi kompleks.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Laluan Selari dan Laluan Pintasan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Laluan Selari dan Laluan Pintasan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Laluan Selari dan Laluan Pintasan”?

Laksanakan corak UI lanjutan seperti laluan selari untuk bahagian bebas dan laluan pintasan untuk pengalaman seperti modal. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Laluan Selari dan Laluan Pintasan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Laluan Dinamik dan Segmen Tangkap Semua
Reka Letak Bersarang dan Kumpulan Laluan
Laluan Selari dan Laluan Pintasan
Konvensyen UI Pemuatan dan Ralat

← Kembali ke Aplikasi Web Fullstack Next.js 15