React Router - Using React Router for Navigation

 

React Router waa maktabad muhiim ah oo caawiysa horumariyeyaasha React si ay u abuuraan navigation u dhigma bogag kala duwan—la mid ah sida aad ugu wareegto bogagga website-yada caadiga ah. Marka aad sameyneyso app React ah oo leh bogag badan (pages), React Router wuxuu kuu ogolaanayaa inaad si fudud u maamusho sida dadka u kala wareegayaan bogaggaas iyadoo aan bogga si buuxda loo reload-gareynin.

1. Ku rakibida React Router

React Router - Using React Router for Navigation

Si aad u bilowdo, marka hore ku rakib React Router maktabadda:

npm install react-router-dom

2. Qaab-dhismeedka Aasaasiga ah

Waxaa lagama maarmaan ah inaad ku duubto dhammaan app-kaaga gudaheeda <BrowserRouter>. Tusaale:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Sharaxaad:

• <BrowserRouter> waa component-ka ugu weyn ee xakameeya routing-ka.

• <Routes> wuxuu hayo dhammaan <Route> components-ka.

• <Route> wuxuu qeexayaa URL-ka (path) iyo component-ka la soo bandhigayo (element).

3. Navigation Isticmaalka <Link>

Haddii aad rabto inaad u gudubto bog kale adigoo aan page-ka refresh-gareynin, waxaad isticmaashaa <Link>:

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Faa’iidooyinka Link:

• Uma baahna reload buuxa.

• Waxay ilaalisaa state-ka React.

4. Navigating Programmatically

Mararka qaar waxaad rabtaa inaad navigation samayso adigoo adeegsanaya JavaScript. Waxaa lagu sameeyaa useNavigate():

import { useNavigate } from 'react-router-dom';

function ContactButton() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/contact')}>Tag Contact</button>
  );
}

Gunaanad

React Router wuxuu si aad ah u fududeeyaa wareejinta u dhaxeysa components/bogag kala duwan oo ku jira React app. Waxaad si habboon u dhisi kartaa navigation casri ah adigoo isticmaalaya <BrowserRouter>, <Route>, <Link>, iyo useNavigate. Waa qalab lagama maarmaan u ah horumariyaha React si uu u abuuro SPA (Single Page Application) dhameystiran.