Nalutas: i-react ang sinulid ng router

Ang pangunahing problema na nauugnay sa React Router yarn ay maaaring mahirap itong i-configure nang tama. Nangangailangan ito ng maraming pag-setup at pagsasaayos, at kung nagawa nang hindi tama, maaari itong humantong sa hindi inaasahang pag-uugali o mga error. Bukod pa rito, ang dokumentasyon para sa React Router yarn ay hindi palaging malinaw o napapanahon, na nagpapahirap sa mga developer na mag-troubleshoot ng mga isyu.

 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. Ini-import ng linyang ito ang mga bahagi ng BrowserRouter, Ruta, at Link mula sa library ng react-router-dom:
i-import ang { BrowserRouter bilang Router, Route, Link } mula sa "react-router-dom";

2. Binabalot ng linyang ito ang buong application sa isang bahagi ng Router upang magbigay ng functionality sa pagruruta:

3. Ang div element na ito ay naglalaman ng listahan ng mga link na gagamitin upang mag-navigate sa pagitan ng iba't ibang ruta:

ano ang React Router

Ang React Router ay isang library ng pagruruta para sa React na nagbibigay-daan sa mga developer na gumawa at mamahala ng mga ruta sa loob ng kanilang mga application ng React. Nagbibigay ito ng paraan upang deklaratibong imapa ang mga ruta sa mga bahagi, pangasiwaan ang mga parameter ng URL, at pamahalaan ang mga kaganapan sa nabigasyon. Nagbibigay din ito ng mga tampok tulad ng dynamic na pagtutugma ng ruta, paghawak sa paglipat ng lokasyon, at pag-scroll sa pagpapanumbalik.

Ano ang Yarn

Ang Yarn ay isang package manager para sa JavaScript na tumutulong sa mga developer na pamahalaan ang kanilang mga dependency sa mas mahusay at secure na paraan. Ginagamit ito ng React Router para mag-install, mag-update, at mag-configure ng mga package. Tinutulungan din ng Yarn ang mga developer na subaybayan ang mga dependency ng kanilang proyekto, na tinitiyak na ang lahat ng kinakailangang package ay naka-install at napapanahon. Ginagawa nitong mas madali ang paggawa sa mga proyekto na may maraming developer dahil madaling masuri ng bawat isa kung anong mga bersyon ng mga pakete ang kailangan nilang gamitin.