Dipecahkan: reaksi-router-dom untuk

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

Tentu, saya bisa membuat artikel tentang topik tertentu. Ini dia:

React-router-dom adalah perpustakaan penting dalam ekosistem React yang menyediakan fungsionalitas perutean inti untuk React Router. Pustaka canggih ini membantu pengembang membangun aplikasi satu halaman dengan navigasi tanpa perlu menyegarkan halaman saat pengguna bernavigasi.

Tidak hanya membuat perutean mudah diterapkan, namun juga menyediakan perutean dinamis dan rute bersarang – kunci untuk membangun aplikasi dengan antarmuka pengguna.

**React-router-dom** memungkinkan Anda menyusun aplikasi dengan rute berbeda yang dapat merender komponen berbeda, dan juga dapat meneruskan props ke komponen ini. Kekuatan dan fleksibilitasnya menjadikannya alat penting dalam repertoar pengembang React.

Masalah React-router-dom dan solusinya

Salah satu masalah umum yang dihadapi saat bekerja dengan react-router-dom adalah mengelola transisi rute dan animasi. Hal ini terbukti menantang karena arsitektur React yang berbasis komponen. Solusi sempurna untuk hal ini adalah dengan memanfaatkan metode siklus hidup yang disediakan oleh React-router-dom.

Kait **useEffect** sangat membantu dan dapat digunakan untuk melakukan efek samping dari komponen fungsi. Ini memiliki tujuan yang sama seperti **componentDidMount**, **componentDidUpdate**, dan **componentWillUnmount** di kelas React, tetapi disatukan menjadi satu API.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Hook ini akan berjalan setelah setiap render ketika 'nama jalur' berubah, sehingga memecahkan masalah kita.

Penjelasan Kode Langkah-demi-Langkah

Mari kita telusuri kode di atas. Fungsi ScrollToTop memanfaatkan hook 'useLocation' dari react-router-dom untuk mendapatkan akses ke 'pathname'.

Selanjutnya, fungsi 'useEffect' dipanggil dengan fungsi yang memberitahu browser untuk menggulir ke bagian atas halaman, dan array ketergantungan yang menyertakan 'nama jalur'. Ini memberitahu React untuk memanggil fungsi kita setiap kali 'nama jalur' berubah.

Ketika Tautan react-router-dom diklik dan 'nama jalur' berubah, fungsi 'useEffect' akan terpicu dan browser akan menggulir ke bagian atas halaman.

Menggunakan Library atau Fungsi di React-router-dom

React-router-dom menyediakan beberapa hook yang dapat digunakan untuk berinteraksi dengan sistem routing:

  • Kait 'useParams', yang mengembalikan objek pasangan kunci/nilai dari URL.
  • 'useRouteMatch' memungkinkan kita memeriksa apakah URL saat ini cocok dengan suatu pola.
  • Kait 'useHistory' memberi kita akses ke contoh riwayat yang dapat kita gunakan untuk bernavigasi.

**React-router-dom** adalah perpustakaan penting untuk aplikasi React apa pun yang memerlukan perutean, karena aplikasi yang diberdayakannya akan menjadi datar dan non-interaktif tanpanya. Sederhana dan intuitif untuk digunakan, menjadikannya alat yang hebat baik untuk pemula maupun pengembang berpengalaman.

Pos terkait: