Jinsi ya Kutumia React Router kwa Navigation

Jifunze jinsi ya kutumia React Router kuunda navigation ndani ya React apps. React Router inaruhusu ku-create single-page applications (SPA) ambapo watumiaji wanaweza kubadilisha pages bila full page reload, na inafanya UI kuwa fast na interactive.

Hatua za Kuanzisha React Router:

Install React Router

npm install react-router-dom


Create Components

// src/Home.js
import React from 'react';
function Home() {
return <h2>Welcome to Home Page</h2>;
}
export default Home;

// src/About.js
import React from 'react';
function About() {
return <h2>About Us Page</h2>;
}
export default About;

// src/Contact.js
import React from 'react';
function Contact() {
return <h2>Contact Page</h2>;
}
export default Contact;


Setup Router in App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}

export default App;


Maelezo ya Code:

BrowserRouter: Inahifadhi history ya navigation.

Routes & Route: Zina define paths na components zinazopakiwa kwenye route hizo.

Link: Inatumika badala ya <a> kwa SPA navigation ili kuzuia full page reload.

React Router inafanya app yako kuwa fast, responsive, na easy to maintain.

Tips:

Tumia NavLink kama unataka active link styles.

Organize routes kwa nested routes kwa complex apps.

Dynamic routes: /user/:id kwa pages zinazotumia parameter.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509