Soal: cara menginstal dom router reaksi dengan

Pembaharuan Terakhir: 09/11/2023
penulis: Jejak Sumber JavaScript

React Router DOM adalah perpustakaan yang banyak digunakan di ekosistem React untuk membangun aplikasi satu halaman dengan kemampuan perutean. Salah satu manfaat signifikan perpustakaan ini adalah menyediakan serangkaian fitur untuk mencocokkan URL dan mengaktifkan komponen tertentu.

Apa itu React Router Dom?

React Router DOM adalah pustaka perutean sisi klien yang dinamis di Bereaksi lingkungan, memungkinkan pengembang untuk membuat aplikasi web yang kuat dan mudah diakses. Ide dasarnya adalah menyinkronkan UI Anda dengan URL saat ini, menjadikan aplikasi Anda intuitif dan ramah pengguna.

Pustaka ini secara signifikan memperkaya pengalaman pengguna karena memastikan bahwa pengguna tidak perlu menyegarkan browser mereka saat bernavigasi melalui aplikasi. Selain itu, penerapannya sangat mudah.

Menginstal DOM Router Bereaksi

Untuk menyiapkan ini, pertama-tama kita perlu menginstal pustaka react-router-dom. Ini dapat dengan mudah dilakukan dengan menjalankan perintah berikut di terminal Anda:

npm install react-router-dom

Perintah ini menginstal Bereaksi Router DOM paket ke dalam proyek kami. Setelah instalasi berhasil, sekarang kita dapat mengimpor komponen yang diperlukan dari 'react-router-dom' ke dalam aplikasi kita.

Menyiapkan React Router Dom

Sekarang kita telah berhasil menginstal ini ke proyek kita, sekarang saatnya untuk mengimplementasikannya. Mari kita lihat implementasi dasar dari react-router-dom:

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Component1} />
        <Route path="/component2" component={Component2} />
      </Switch>
    </Router>
  );
}
export default App;

Pada kode di atas, kita telah mengimpor komponen yang diperlukan dari Bereaksi Router DOM Perpustakaan.

Memahami Kode

  • The `Komponen ` menggunakan API riwayat HTML5 (pushState, replaceState, dan acara popstate) untuk menjaga UI tetap sinkron dengan URL. Kami telah memberinya alias `` untuk kenyamanan.
  • Di dalam Router, kami telah menempatkan `` komponen. Komponen React Router ini mencari melalui turunannya `` komponen untuk merender komponen pertama yang prop jalurnya cocok dengan nama jalur lokasi saat ini.
  • Langkah selanjutnya melibatkan `` komponen. Ini adalah dimana keajaiban terjadi. Komponen Route digunakan untuk menentukan rute berbeda dari aplikasi kita. Kami mendefinisikan dua jalur, jalur default ('/') yang memuat Komponen1, dan jalur lain ('/component2') yang akan memuat Komponen2 saat diakses.

Konsep perutean merupakan dasar untuk membuat aplikasi satu halaman di React. Dengan Bereaksi Router DOM, penerapannya menjadi mudah dan intuitif.

Fitur Tambahan

React Router Dom menawarkan lebih banyak fitur selain yang disebutkan di atas. Misalnya, Perutean Bersarang, Parameter URL, Navigasi terprogram, dll., adalah beberapa fitur tambahan yang disediakan perpustakaan ini untuk meningkatkan pengalaman pengembang.

Memahami dan menguasai React Router Dom sangat penting bagi setiap Pengembang React karena ini merupakan dasar untuk membuat aplikasi web yang dinamis dan interaktif.

Pos terkait: