Diselesaikan: bereaksi benang router

Masalah utama yang terkait dengan benang React Router adalah sulitnya mengonfigurasi dengan benar. Ini membutuhkan banyak penyiapan dan konfigurasi, dan jika dilakukan dengan tidak benar, dapat menyebabkan perilaku atau kesalahan yang tidak diharapkan. Selain itu, dokumentasi untuk benang React Router tidak selalu jelas atau mutakhir, sehingga menyulitkan pengembang untuk memecahkan masalah.

 add react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

<Router> 
    <div> 
        <ul> 
            <li><Link to="/">Home</Link></li> 
            <li><Link to="/about">About</Link></li> 
            <li><Link to="/topics">Topics</Link></li> 
        </ul>

        <hr />

        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/topics" component={Topics} />  

    </div>  
</Router>

1. Baris ini mengimpor komponen BrowserRouter, Route, dan Link dari pustaka react-router-dom:
import {BrowserRouter as Router, Route, Link} dari “react-router-dom”;

2. Baris ini membungkus seluruh aplikasi dalam komponen Router untuk menyediakan fungsionalitas perutean:

3. Elemen div ini berisi daftar tautan yang akan digunakan untuk bernavigasi di antara berbagai rute:

apa itu React Router

React Router adalah pustaka perutean untuk React yang memungkinkan pengembang membuat dan mengelola rute dalam aplikasi React mereka. Ini menyediakan cara untuk memetakan rute ke komponen secara deklaratif, menangani parameter URL, dan mengelola peristiwa navigasi. Ini juga menyediakan fitur seperti pencocokan rute dinamis, penanganan transisi lokasi, dan pemulihan gulir.

Apa itu Benang

Yarn adalah pengelola paket untuk JavaScript yang membantu pengembang mengelola ketergantungan mereka dengan cara yang lebih efisien dan aman. Ini digunakan oleh React Router untuk menginstal, memperbarui, dan mengonfigurasi paket. Yarn juga membantu pengembang melacak ketergantungan proyek mereka, memastikan bahwa semua paket yang diperlukan telah diinstal dan diperbarui. Ini membuatnya lebih mudah untuk mengerjakan proyek dengan banyak pengembang karena masing-masing dapat dengan mudah memeriksa versi paket apa yang perlu mereka gunakan.