HTML ትምህርት - ክፍል 13

🗺️

React Router ምንድን ነው? // What is React Router?

React Router — React App ውስጥ ብዙ Pages (Routes) ለማስሮጥ ይጠቅማል። Page reload ሳይሆን URL ይቀያየራል — SPA (Single Page Application)!
React Router lets you build multi-page apps without full page reloads — the URL changes but only the content updates!

💡

Install: npm install react-router-dom
— ከ npm ያወርዳል / Download from npm
After installing, import BrowserRouter, Routes, Route, Link from react-router-dom.

🌐 URL ሲቀያየር Page ይቀያየራል:

🔒myapp.com/← Home Page

🔒myapp.com/about← About Page

🔒myapp.com/lessons← Lessons Page

🔒myapp.com/lesson/5← Dynamic Route

⚙️

Step 1 — Setup & Routes // BrowserRouter + Routes

App.jsx — Router Setup

import {
  BrowserRouter,  // ሁሉም ይጠቀልላል
  Routes,         // Routes ሳጥን
  Route,          // አንድ route
  Link,           // <a> tag ምትክ
  NavLink,        // active class ያለው Link
  useNavigate,    // JS ተጠቅሞ navigate
  useParams,      // URL parameters ለማንበብ
} from 'react-router-dom';

import Home     from './pages/Home';
import About    from './pages/About';
import Lessons  from './pages/Lessons';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Navbar />  {/* ሁሌ ይታያል */}

      <Routes>
        <Route path="/"          element={<Home />}     />
        <Route path="/about"     element={<About />}    />
        <Route path="/lessons"   element={<Lessons />}  />
        <Route path="/lesson/:id" element={<Lesson />}   />
        <Route path="*"          element={<NotFound />} />
      </Routes>

    </BrowserRouter>
  );
}

📋 Routes ሠንጠረዥ:

PATH	COMPONENT	ገፁ
/	<Home />	ዋና ገፅ / Home page
/about	<About />	ስለ እኛ / About page
/lessons	<Lessons />	ትምህርቶች ዝርዝር
/lesson/:id	<Lesson />	Dynamic — :id ቀያይር
*	<NotFound />	404 — ያልተገኘ ገፅ

🔗

Step 2 — Link & NavLink // Navigation

Link = <a> tag ምትክ — page reload ሳይሆን navigate ያደርጋል! NavLink = active class ጨምሮ!
Never use <a href> in React Router — use <Link> to avoid full page reloads!

Navbar.jsx — Link vs NavLink

function Navbar() {
  return (
    <nav>
      {/* Link — ቀለል ያለ navigation */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      {/* NavLink — active ሲሆን class ይጨምራል */}
      <NavLink
        to="/lessons"
        className={({ isActive }) =>
          isActive ? 'active' : ''
        }
      >
        Lessons
      </NavLink>
    </nav>
  );
}

// useNavigate — JS ተጠቅሞ navigate
function LoginPage() {
  const navigate = useNavigate();

  function handleLogin() {
    // login logic...
    navigate('/'); // Home ሂድ
  }
}

🔢

Step 3 — useParams // Dynamic Routes

useParams — URL ውስጥ ያለ dynamic value ለማንበብ! /lesson/:id → id ን ያነባል!
useParams reads dynamic segments from the URL — like /lesson/5 gives you id = "5"!

Lesson.jsx — useParams ምሳሌ

function Lesson() {
  // URL /lesson/5 ከሆነ → id = "5"
  const { id } = useParams();

  const lessons = [
    { id: '1', title: 'HTML Basics'   },
    { id: '2', title: 'CSS Flexbox'   },
    { id: '3', title: 'JavaScript'    },
  ];

  const lesson = lessons.find(l => l.id === id);

  if (!lesson) return <p>ትምህርት አልተገኘም!</p>;

  return (
    <div>
      <h1>ክፍል {id}: {lesson.title}</h1>
      <Link to="/lessons">← ሁሉም ትምህርቶች</Link>
    </div>
  );
}

🎮 Demo — useParams: ትምህርት ምረጥ → URL ይቀያየራል!
Click a lesson — see how useParams would read the :id from the URL!

← ትምህርት ምረጥ / Select a lesson

🎮

Live Demo — React Router App! // Try Navigation

Browser ውስጥ React Router ስሜት! Nav links ጠቅ አድርግ — ገፅ ይቀያየራል!
Simulate React Router navigation — click links to switch pages!

🏠 Home

ℹ️ About

📚 Lessons

✉️ Contact

🏠 ሰላም! EthioCode へ እንኳን ደህና መጣህ!

React Router ተጠቅሞ ሰራን! ሁሉም ትምህርቶች ይጠብቅሃል! 🔥
This is the Home page — path="/"

ℹ️ ስለ EthioCode SoftSelect

Ethiopia ውስጥ Web Development ትምህርት! HTML, CSS, JavaScript, React — ሁሉም አማርኛ + English!
path="/about" — About component renders here

13+

ትምህርቶች

1K+

አባላት

@AppMinds_ET

Creator

📚 ሁሉም ትምህርቶች

path="/lessons" — Lessons component renders here

✉️ ያግኙን

path="/contact" — Contact component renders here

📢 Telegram: @EthioCodeSoftSelect

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

🗺️ BrowserRouter — ሁሉም ይጠቀልለዋል

App.jsx ውስጥ <BrowserRouter> ሁሉን ይጠቀልለዋል። አንድ ጊዜ ብቻ!
Wrap your entire app in BrowserRouter — only once!

2

🛤️ Routes + Route — Pages ማዘጋጀት

<Route path="/about" element={<About />} /> — path ና Component አብሮ ይፃፋሉ!
Each Route maps a URL path to a component.

3

🔗 Link / NavLink — <a> ምትክ

<Link to="/about"> ተጠቀም — <a href> አትጠቀም! Page reload ይሆናል!
Always use Link instead of <a> to prevent full page reloads.

4

🔢 useParams — Dynamic Routes

/lesson/:id → const {'{'}id{'}'} = useParams() — URL ውስጥ ያለ value ለማንበብ!
useParams reads dynamic URL segments like :id, :slug, :username.

5

🚀 useNavigate — JS Navigate

const navigate = useNavigate() → navigate('/home') — login ወይም form submit በኋላ ለማስሄድ!
useNavigate lets you redirect programmatically from event handlers.

🎯

Quiz // ምን ተማርን?

❓ React Router ውስጥ <a href="/about"> ለምን አንጠቀምም?
Why shouldn't you use <a href> in React Router?

A React <a> tag አይቀበልም

B ሙሉ page reload ያደርጋል — SPA ትርጉም ይጠፋል ✅

C href attribute React ውስጥ error ይሰጣል

D <a> CSS አይደግፍም

React Router 🗺️ብዙ Pages App!

React Router 🗺️
ብዙ Pages App!