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

Welcome to Home Page

;
}
export default Home;

// src/About.js
import React from 'react';
function About() {
return

About Us Page

;
}
export default About;

// src/Contact.js
import React from 'react';
function Contact() {
return

Contact Page

;
}
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 (

);
}

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