Selesai: bertindak balas benang penghala

Masalah utama yang berkaitan dengan benang React Router ialah sukar untuk dikonfigurasikan dengan betul. Ia memerlukan banyak persediaan dan konfigurasi, dan jika dilakukan secara tidak betul, ia boleh membawa kepada tingkah laku atau ralat yang tidak dijangka. Selain itu, dokumentasi untuk benang React Router tidak sentiasa jelas atau terkini, menyukarkan pembangun untuk menyelesaikan 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 mengimport komponen BrowserRouter, Route dan Link daripada pustaka react-router-dom:
import { BrowserRouter sebagai Router, Route, Link } daripada "react-router-dom";

2. Baris ini membungkus keseluruhan aplikasi dalam komponen Penghala untuk menyediakan fungsi penghalaan:

3. Elemen div ini mengandungi senarai pautan yang akan digunakan untuk menavigasi antara laluan yang berbeza:

apa itu React Router

React Router ialah perpustakaan penghalaan untuk React yang membenarkan pembangun mencipta dan mengurus laluan dalam aplikasi React mereka. Ia menyediakan cara untuk memetakan laluan ke komponen secara deklaratif, mengendalikan parameter URL dan mengurus acara navigasi. Ia juga menyediakan ciri seperti padanan laluan dinamik, pengendalian peralihan lokasi dan pemulihan tatal.

Apa itu Benang

Yarn ialah pengurus pakej untuk JavaScript yang membantu pembangun mengurus kebergantungan mereka dengan cara yang lebih cekap dan selamat. Ia digunakan oleh React Router untuk memasang, mengemas kini dan mengkonfigurasi pakej. Benang juga membantu pembangun menjejaki kebergantungan projek mereka, memastikan semua pakej yang diperlukan dipasang dan dikemas kini. Ini memudahkan untuk mengerjakan projek dengan berbilang pembangun kerana setiap satu boleh menyemak versi pakej yang perlu mereka gunakan dengan mudah.