By Thisara Priyamal — 23 Sep 2025

React Router Basics | Client-side Routing Sinhala | ReactJS Sri Lanka

අපි React app එකක් හදනකොට, සමහරවිට page කිහිපයක් තියෙන application එකක් හදන්න වෙනවා නේද? උදාහරණයක් විදියට, Home, About, Contact වගේ sections තියෙන වෙබ් අඩවියක්. සාමාන්‍යයෙන් වෙබ් අඩවිවල එක page එකකින් තව page එකකට යනකොට මුළු page එකම reload වෙනවා. ඒත් Single Page Applications (SPAs) වලදී එහෙම වෙන්නේ නෑ. එක page එක ඇතුළතම content එක refresh කරනවා.

React වගේ JavaScript Frameworks එක්ක Single Page Applications (SPAs) හදනකොට, මුළු page එකම reload නොකර, අපේ app එක ඇතුළේ තියෙන වෙනස් view වලට navigate කරන්න ක්‍රමයක් ඕන වෙනවා. මෙන්න මේකට තමයි Client-side Routing කියන්නේ. React Router කියන්නේ මේ Client-side Routing functionality එක අපේ React applications වලට ගේන්න තියෙන ජනප්‍රියම සහ බලගතුම library එකක්.

මේ tutorial එකෙන් අපි React Router වල මූලික සංකල්ප (basic concepts) ගැන සිංහලෙන් කතා කරනවා. ඒ වගේම, සරල React Router App එකක් හදලා, Home, About, Contact වගේ pages අතර navigate කරන හැටි ප්‍රායෝගිකව බලමු. ඊට අමතරව, React Router භාවිතා කරනකොට මතක තියාගන්න ඕන වැදගත් කරුණු (best practices) කිහිපයකුත්, පොදු ගැටළු වලට විසඳුම් (common issues and solutions) කිහිපයකුත් අපි සාකච්ඡා කරමු.

1. Client-Side Routing සහ React Router DOM

හරි, මුලින්ම බලමු මේ Client-side Routing කියන්නේ මොකක්ද කියලා. සාමාන්‍යයෙන් වෙබ් අඩවිවල එක page එකකින් තව page එකකට යනකොට Browser එක මුළු page එකම reload කරනවා. ඒක ටිකක් කම්මැලි වැඩක් වගේම, user experience එකට එච්චර හොඳ නැහැ.

Single Page Applications (SPAs) වලදී වෙන්නේ, Browser එක මුලින්ම මුළු app එකේම HTML, CSS, JavaScript files load කරනවා. ඊට පස්සේ, අපි app එක ඇතුළේ navigate කරනකොට, මුළු page එකම reload කරන්නේ නැතුව, JavaScript භාවිතයෙන් අවශ්‍ය content එක විතරක් වෙනස් කරනවා. මේකට තමයි Client-side Routing කියන්නේ.

React App වලට මේ Client-side Routing functionality එක ගේන්න අපි react-router-dom කියන library එක පාවිච්චි කරනවා. react-router-dom කියන්නේ react-router package එකේ web applications වලට විශේෂයෙන්ම හදපු version එක.

React Router DOM Install කරගමු

මුලින්ම ඔයාගේ React project එකට react-router-dom install කරගන්න ඕන. මේ command එක පාවිච්චි කරන්න:

npm install react-router-dom

හරි, දැන් react-router-dom install කරලා ඉවරයි, අපි බලමු මේකේ තියෙන ප්‍රධාන components මොනවද කියලා.

2. React Router වල ප්‍රධාන Components

React Router වල ප්‍රධාන components කිහිපයක් තියෙනවා, ඒවා තමයි BrowserRouter, Routes, සහ Route.

2.1. BrowserRouter

මේක තමයි React Router වලට අඩිතාලම දාන්නේ. BrowserRouter කියන්නේ HTML5 History API එක පාවිච්චි කරලා, ඔයාගේ app එකේ UI එක URL එකත් එක්ක sync කරන්න පුළුවන් කරන component එක. ඔයාගේ app එකේ routing functionality එක ඕන කරන හැම තැනක්ම මේ BrowserRouter එකෙන් wrap කරන්න ඕන. සාමාන්‍යයෙන් අපි මේක src/index.js file එකේදී, මුළු app එකම wrap කරන්න පාවිච්චි කරනවා.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'; // මේක import කරගන්නවා

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter> {/* මුළු App එකම මේකෙන් wrap කරනවා */}
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

2.2. Routes

Routes කියන්නේ ඔයාගේ app එකේ තියෙන හැම Route component එකක්ම එකට අරන් තියාගන්න container එකක් වගේ. මේ Routes component එකෙන් වෙන්නේ, current URL එකට ගැලපෙන Route එක හොයලා, අදාල component එක render කරන එක. මේක <Switch> component එකට සමානයි, ඒත් react-router-dom v6 එකෙන් පස්සේ <Routes> තමයි පාවිච්චි කරන්නේ.

2.3. Route

Route component එකෙන් වෙන්නේ, නිශ්චිත URL path එකකට අදාලව මොන component එකද පෙන්නන්න ඕන කියලා කියන එක. මේකට ප්‍රධාන props දෙකක් තියෙනවා:

path: මේ prop එකෙන් කියන්නේ මොන URL path එකටද මේ route එක ගැලපෙන්න ඕන කියලා (උදා: "/about", "/contact").
element: මේ prop එකට දෙන්නේ, අදාල path එකට ගියාම render වෙන්න ඕන React component එක.

// src/App.js (උදාහරණයක් ලෙස)
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <div>
      <h1>මගේ React App එක</h1>
      <Routes> {/* Routes container එක */}
        <Route path="/" element={<Home />} /> {/* Home page එකට route එක */}
        <Route path="/about" element={<About />} /> {/* About page එකට route එක */}
        <Route path="/contact" element={<Contact />} /> {/* Contact page එකට route එක */}
      </Routes>
    </div>
  );
}

export default App;

3. Pages අතරට යමු: Link Component එක

අපි මේ වෙනකම් route ටික හදාගත්තා. දැන් අපේ app එක ඇතුළේ Home එකෙන් About එකට, About එකෙන් Contact එකට වගේ navigate කරන්නේ කොහොමද කියලා බලමු. සාමාන්‍යයෙන් HTML වල අපි <a> tag එක පාවිච්චි කරනවා නේද link කරන්න? ඒත් React Router එක්ක <a> tag එක පාවිච්චි කරන එක එච්චර හොඳ නැහැ, මොකද ඒකෙන් මුළු page එකම reload වෙනවා. අපිට ඕන Client-side Routing නේ!

මෙන්න මේකට තමයි Link component එක තියෙන්නේ. Link component එකෙන් වෙන්නේ, මුළු page එකම reload කරන්නේ නැතුව, URL එක වෙනස් කරලා අදාල route එකට අදාල component එක render කරන එක. මේකත් react-router-dom වලින්ම තමයි එන්නේ.

Link component එකට to කියලා prop එකක් තියෙනවා. මේ to prop එකට අපි navigate කරන්න ඕන path එක දෙනවා.

// src/Navbar.js (උදාහරණයක් ලෙස)
import React from 'react';
import { Link } from 'react-router-dom'; // Link component එක import කරගන්නවා

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link> {/* Home page එකට link එක */}
        </li>
        <li>
          <Link to="/about">About</Link> {/* About page එකට link එක */}
        </li>
        <li>
          <Link to="/contact">Contact</Link> {/* Contact page එකට link එක */}
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

දැන් ඔයාට තේරෙනවා ඇති Link component එක කොච්චර වැදගත්ද කියලා. මේකෙන් user experience එක වැඩිදියුණු වෙනවා, මොකද page එක reload වෙන්නේ නැතුව smooth transition එකක් ලැබෙන නිසා.

4. ප්‍රායෝගික උදාහරණයක්: Multi-Page App එකක් හදමු!

දැන් අපි මේක ප්‍රායෝගිකව කරලා බලමු. අපි සරල React App එකක් හදලා, Home, About, Contact කියන pages තුන අතර navigate කරන විදිය බලමු. මුලින්ම ඔයාගේ project එක හදාගන්න:

npx create-react-app my-router-app
cd my-router-app
npm install react-router-dom
npm start

4.1. Page Components ටික හදමු

src folder එක ඇතුළේ අලුත් files තුනක් හදන්න: Home.js, About.js, Contact.js.

`src/Home.js`

import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home Page එක</h2>
      <p>අපේ App එකට සාදරයෙන් පිළිගනිමු!</p>
    </div>
  );
}

export default Home;

`src/About.js`

import React from 'react';

function About() {
  return (
    <div>
      <h2>About Us Page එක</h2>
      <p>අපි කවුද කියලා මෙතනින් දැනගන්න.</p>
    </div>
  );
}

export default About;

`src/Contact.js`

import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact Us Page එක</h2>
      <p>අපිට කතා කරන්න ඕන නම්, මේ page එක පාවිච්චි කරන්න.</p>
    </div>
  );
}

export default Contact;

දැන් src folder එක ඇතුළේ Navbar.js කියලා අලුත් file එකක් හදලා, Link components පාවිච්චි කරලා navigation bar එක හදමු.

`src/Navbar.js`

import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css'; // අපි CSS file එකකුත් add කරමු

function Navbar() {
  return (
    <nav className="navbar">
      <ul className="nav-list">
        <li className="nav-item">
          <Link to="/" className="nav-link">Home</Link>
        </li>
        <li className="nav-item">
          <Link to="/about" className="nav-link">About</Link>
        </li>
        <li className="nav-item">
          <Link to="/contact" className="nav-link">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

CSS ටිකකුත් දාමු src/Navbar.css file එකට. (මේක අනිවාර්ය නැහැ, ඒත් ලස්සනට පේන්න.)

`src/Navbar.css`

.navbar {
  background-color: #333;
  padding: 10px 0;
}

.nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 15px;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
  background-color: #575757;
}

4.3. App එකේ Routing ටික හදමු

දැන් src/App.js file එක open කරලා, අපි හදාගත්ත Navbar එකයි, page components ටිකයි, Routes සහ Route components ටිකයි එකතු කරමු.

`src/App.js`

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import './App.css'; // අනිත් CSS files වලට බලපෑමක් නොවන විදියට App.css එකටත් basic styles ටිකක් දාමු

function App() {
  return (
    <div className="App">
      <Navbar /> {/* Navigation Bar එක */}
      <div className="content">
        <Routes> {/* Routes container එක */}
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          {/* 404 Not Found page එකක් ඕන නම් මෙහෙම දාන්න පුළුවන් */}
          <Route path="*" element={<h2>404 Page Not Found</h2>} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

src/App.css file එකටත් පොඩි styles ටිකක් දාමු:

`src/App.css`

.App {
  font-family: Arial, sans-serif;
  text-align: center;
}

.content {
  padding: 20px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}

h1, h2 {
  color: #333;
}

p {
  color: #555;
  line-height: 1.6;
}

4.4. BrowserRouter එකෙන් App එක Wrap කරමු

අන්තිමට, src/index.js file එකට ගිහින් BrowserRouter එකෙන් අපේ App component එක wrap කරමු. මේක කලින් උදාහරණයේ පෙන්නුවා වගේම තමයි.

`src/index.js`

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './index.css'; // Global CSS තිබුණොත්

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

දැන් ඔයාගේ app එක npm start කරලා බලන්න. ඔයාට Home, About, Contact කියන pages අතර, මුළු page එකම reload වෙන්නේ නැතුව smooth විදියට navigate කරන්න පුළුවන් වෙන්න ඕන.

5. පොදු ගැටළු සහ විසඳුම් (Common Issues and Solutions)

React Router පාවිච්චි කරනකොට, මුලින්ම වැරදෙන්න පුළුවන් තැන් කිහිපයක් තියෙනවා. ඒවා ගැනත් කතා කරමු.

5.1. Page එක Refresh වීම (Full Page Reload)

ඔයා Link component එක වෙනුවට <a> tag එක පාවිච්චි කළොත්, Browser එක මුළු page එකම reload කරනවා. මේක SPA එකකදී වෙන්න ඕන දෙයක් නෙමෙයි.

වැරදි ක්‍රමය: <a href="/about">About</a>
නිවැරදි ක්‍රමය: <Link to="/about">About</Link>

සටහන: ඔයාට external link එකකට යන්න ඕන නම් (උදා: google.com), එතකොට <a> tag එකම පාවිච්චි කරන්න පුළුවන්. ඒත් ඔයාගේ app එක ඇතුළේ pages අතර navigate කරනකොට හැම වෙලේම Link පාවිච්චි කරන්න.

5.2. Route එක Match නොවීමට

සමහරවිට ඔයා navigate කරන path එකට අදාල component එක render නොවෙන්න පුළුවන්. මේකට හේතු කිහිපයක් තියෙනවා:

BrowserRouter එකෙන් App එක Wrap නොකිරීම: src/index.js file එකේදී මුළු App component එකම BrowserRouter එකෙන් wrap කරලා නැත්නම්, routing වැඩ කරන්නේ නැහැ.
path Prop එකේ වැරදි: <Route path="/about" element={<About />} /> වගේ තැනක path එක හරියට දීලා නැත්නම්, route එක match වෙන්නේ නැහැ.
Routes Component එක පාවිච්චි නොකිරීම: හැම Route එකක්ම <Routes></Routes> ඇතුළේ තියෙන්න ඕන.

5.3. Base URL එකේ ගැටළු

සමහර වෙලාවට ඔයාගේ App එක Subdirectory එකක deploy කරලා තියෙනවා නම් (උදා: www.mywebsite.com/my-app/), BrowserRouter එකට basename prop එකක් දෙන්න වෙනවා:

<BrowserRouter basename="/my-app">
  <App />
</BrowserRouter>

නිගමනය

ඉතින් යාලුවනේ, මේ tutorial එකෙන් අපි React Router වල මූලික සංකල්ප (basics) ගැන ඉගෙනගත්තා. Single Page Applications (SPAs) වලදී Client-side Routing කොච්චර වැදගත්ද කියලත්, ඒකට react-router-dom library එක පාවිච්චි කරන්නේ කොහොමද කියලත් අපි දැක්කා.

අපි ඉගෙනගත්තා BrowserRouter එකෙන් මුළු app එකම wrap කරන හැටි, Routes component එකෙන් routes ටික manage කරන හැටි, Route component එකෙන් නිශ්චිත path එකකට component එකක් render කරන හැටි, ඒ වගේම Link component එක පාවිච්චි කරලා pages අතර smooth විදියට navigate කරන හැටි.

දැන් ඔයාට පුළුවන් මේ දැනුම පාවිච්චි කරලා, ඔයාගේම React projects වලට routing functionality එක එකතු කරන්න. මේක ඔයාගේ ඊලඟ React project එකට එකතු කරලා බලන්න! මොනවා හරි ගැටළුවක් ආවොත්, පහළින් comment එකක් දාන්න, අපි උදව් කරන්නම්. Happy Coding!