Mastering React Router Basics: A Step-by-Step Sinhala Guide

ආයුබෝවන් React Devsලා හැමෝටම! 👋 අද අපි කතා කරන්න යන්නේ React Application එකක් හදනකොට අනිවාර්යයෙන්ම ඕන වෙන, ගොඩක් වැදගත් මාතෘකාවක් ගැන. ඒ තමයි React Router. ඔයාලා Single Page Applications (SPAs) වලට අලුත් කෙනෙක් නම්, මේක තමයි ඔයාලගේ journey එකේදී ඉගෙන ගන්නම ඕන දෙයක්. මොකද මේකෙන් තමයි අපේ යෙදුමේ (Application) පිටු අතර පහසුවෙන් මාරු වෙන්නේ.

සමහරවිට ඔයාලා හිතනවා ඇති, "අපිට සාමාන්‍යයෙන් <a> tag එකෙන් පිටු අතර යන්න පුළුවන්නේ, ඇයි මේ React Router කියන අලුත් දෙයක්?" කියලා. ඒ ප්‍රශ්නයට උත්තරේ තමයි, සාමාන්‍ය <a> tag එකක් භාවිතා කළොත්, ඒ හැම වෙලාවකම බ්‍රවුසරය (browser) මුළු පිටුවම (entire page) reload කරනවා. හැබැයි අපි React වලදී හදන්නේ SPAs. ඒ කියන්නේ මුළු පිටුවම reload නොකර, අවශ්‍ය කොටස් විතරක් වෙනස් කරනවා. මේ වැඩේට තමයි React Router අපිට උදව් කරන්නේ.

අද මේ ටියුටෝරියල් එකෙන් අපි මොනවද ඉගෙන ගන්නේ කියලා බලමු:

• Client-side Routing කියන්නේ මොකක්ද සහ SPAs වලට ඒක වැදගත් වෙන්නේ ඇයි කියලා.
• React Router DOM එකට හැඳින්වීමක්.
• BrowserRouter, Routes, Route වගේ ප්‍රධාන components සකසා ගන්න විදිය.
• Link component එක භාවිතා කරලා පිටු අතර navigate කරන්නේ කොහොමද කියලා.
• Home, About, Contact වගේ පිටු කිහිපයක් තියෙන application එකක් React Router භාවිතා කරලා හදන හැටි.
• පොදු ගැටළු සහ ඒවාට විසඳුම්, සහ හොඳම භාවිතයන් (Best Practices).

එහෙනම්, අපි පටන් ගමු!

Client-Side Routing සහ Single Page Applications (SPAs)

මුලින්ම අපි තේරුම් ගමු මේ Client-side routing කියන්නේ මොකක්ද කියලා. සාමාන්‍ය වෙබ් අඩවි (traditional websites) වලදී ඔයා වෙනත් පිටුවකට (page) යන හැම වෙලාවකම, බ්‍රවුසරය server එකට අලුත් ඉල්ලීමක් (request) යවනවා. Server එක අලුත් HTML පිටුවක් එවපුවාම, බ්‍රවුසරය ඒ මුළු පිටුවම reload කරනවා. මේක ටිකක් වෙලා යන වැඩක්. හිතන්න, ඔයා Facebook එකේ News Feed එකේ ඉන්නකොට Profile එකට ගියාම මුළු Facebook එකම reload වෙනවා නම්, ඒක කොච්චර කරදරයක්ද?

මේකට විසඳුම තමයි Single Page Applications (SPAs). SPA එකකදී මුලින්ම මුළු HTML, CSS, JavaScript files ටික එක පාරක් load කරනවා. ඊට පස්සේ ඔයා යෙදුම ඇතුළේ වෙනත් පිටු වලට යනකොට, මුළු පිටුවම reload වෙන්නේ නැහැ. ඒ වෙනුවට, JavaScript මගින් පිටුවේ අවශ්‍ය කොටස් විතරක් update කරනවා. මේකට තමයි Client-side Routing කියන්නේ. මේකෙන් application එක වේගවත් වෙනවා, User Experience එකත් ගොඩක් හොඳ වෙනවා.

React, Angular, Vue වගේ frameworks වලින් SPAs හදනකොට, මේ Client-side routing කරන්න වෙනම library එකක් ඕන වෙනවා. React වලට ඒ වැඩේ කරන්නේ React Router.

React Router DOM යනු කුමක්ද?

React Router කියන්නේ React application වල Client-side routing handle කරන standard library එක. ඒකේ ප්‍රධාන package එක තමයි react-router-dom කියන්නේ. DOM කියන්නේ Document Object Model එකට. ඒකෙන් කියන්නේ මේ library එක Web Applications වලට (browser environment එකට) විශේෂයෙන් හදලා තියෙනවා කියන එක.

ස්ථාපනය (Installation)

React project එකක් ඇතුළේ react-router-dom install කරගන්න එක නම් ගොඩක්ම ලේසියි. ඔයාගේ project folder එක ඇතුළේ terminal එක open කරලා මේ command එක type කරන්න:

npm install react-router-dom
# නැත්නම්
yarn add react-router-dom

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

React Router හි මූලික සංරචක (Core Components of React Router)

React Router වල ප්‍රධාන Components කිහිපයක් තියෙනවා. මේවා තේරුම් ගත්තොත් ඔයාට Routing එක පහසුවෙන් handle කරගන්න පුළුවන්.

1. BrowserRouter

මේක තමයි Router එකේ මූලිකම Component එක. අපේ React application එකේ routing ක්‍රියාකාරිත්වය enable කරන්න මේක අනිවාර්යයි. BrowserRouter එකෙන් අපේ application එකේ URL එක සහ UI එක synchronize කරනවා. සාමාන්‍යයෙන් මේක අපේ application එකේ root component එක වටේ (<App /> වටේ) wrap කරනවා.

2. Routes

Routes කියන්නේ අපේ application එකේ තියෙන හැම Route Component එකක්ම එකට එකතු කරන container එක. මේක ඇතුළේ තමයි අපි අපේ හැම path එකක්ම (URL එකක්ම) සහ ඒකට අදාළ component එකත් define කරන්නේ.

3. Route

Route Component එකෙන් කරන්නේ නිශ්චිත URL path එකකට component එකක් render කිරීම. මේකට ප්‍රධාන props දෙකක් තියෙනවා:

• path: මේකෙන් කියන්නේ URL එකේ කුමන කොටස match උනාමද මේ component එක render වෙන්න ඕන කියලා. (උදා: /about)
• element: path එක match උනාම render වෙන්න ඕන React component එක.

පිටු අතර මාරු වීම: Link Component එක (Navigating Between Pages: The Link Component)

අපි කලින් කිව්වා වගේ, සාමාන්‍ය <a> HTML tag එක භාවිතා කළොත්, මුළු පිටුවම reload වෙනවා. SPA එකකදී ඒක නරක User Experience එකක්. ඒ නිසා React Router වලදී අපි පිටු අතර යන්න <Link> Component එක භාවිතා කරනවා.

<Link> Component එකත් <a> tag එක වගේමයි, හැබැයි ඒකෙන් browser එකට කියනවා පිටුව reload කරන්න එපා, JavaScript භාවිතා කරලා content එක update කරන්න කියලා. මේකට to කියන prop එක භාවිතා කරනවා. මේක හරියට <a> tag එකේ href attribute එක වගේ.

<Link to="/about">About Us</Link>

ප්‍රායෝගික උදාහරණයක්: Multi-Page React App එකක් (A Practical Example: A Multi-Page React App)

දැන් අපි ඉගෙන ගත්ත දේවල් වලින් පොඩි application එකක් හදමු. මේකේ Home, About, Contact කියලා පිටු තුනක් තියෙනවා. Navigation bar එකකින් මේ පිටු අතර යන්න පුළුවන්.

ව්‍යාපෘතිය සකස් කිරීම (Setting Up the Project)

මුලින්ම අලුත් React project එකක් හදාගමු:

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

දැන් react-router-dom install කරගන්න:

npm install react-router-dom

Page Components නිර්මාණය කිරීම (Creating Page Components)

src folder එක ඇතුළේ pages කියලා folder එකක් හදලා, ඒ ඇතුළේ මේ files ටික හදන්න:

src/pages/Home.js

import React from 'react';

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

export default Home;

src/pages/About.js

import React from 'react';

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

export default About;

src/pages/Contact.js

import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact Us Page</h2>
      <p>අප හා සම්බන්ධ වීමට...</p>
    </div>
  );
}

export default Contact;

Navigation Bar එකක් සෑදීම (Creating a Navigation Bar)

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

src/components/Navbar.js

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

function Navbar() {
  return (
    <nav>
      <ul style={{ listStyleType: 'none', padding: 0, display: 'flex', gap: '20px' }}>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

App.js configure කිරීම (Configuring App.js)

දැන් මේ හැම Component එකක්ම එකට එකතු කරලා, Routing setup එක src/App.js එක ඇතුළේ කරමු.

src/App.js

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

function App() {
  return (
    <Router>
      <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
        <h1>මගේ Router App එක</h1>
        <Navbar />
        <hr />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <!--
            ඔයාට ඕන නම් 404 Not Found Page එකක් හදන්නත් පුළුවන්.
            ඒකට මේ විදියට path="*" කියලා දෙන්න පුළුවන්.
            <Route path="*" element={<NotFound />} />
          -->
        </Routes>
      </div>
    </Router>
  );
}

export default App;

දැන් ඔයා npm start කරලා බලන්න. ඔයාට Home, About, Contact කියන පිටු අතර Navbar එකේ Links භාවිතා කරලා, page එක reload නොවී මාරු වෙන්න පුළුවන්.

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

React Router භාවිතා කරනකොට මුලින්ම එන පොදු ගැටළු කිහිපයක් සහ ඒවාට විසඳුම් බලමු.

1. පිටුව reload වෙනවා (Page is reloading)

මේක තමයි වැඩිපුරම එන ප්‍රශ්නය. ඔයා <Link> component එක වෙනුවට <a> HTML tag එක භාවිතා කළොත්, පිටුව reload වෙනවා. මතක තියාගන්න, React Router එක්ක අභ්‍යන්තර (internal) navigation වලට හැමවිටම <Link> භාවිතා කරන්න.

// වැරදියි!
<a href="/about">About Us</a>

// නිවැරදියි!
<Link to="/about">About Us</Link>

2. Component එක Render වෙන්නේ නැහැ (Component is not rendering)

මේකට හේතු කිහිපයක් බලපාන්න පුළුවන්:

• path එක හරියට match වෙන්නේ නැති එක. ඔයාගේ URL එකයි Route එකේ path prop එකයි හරියටම match වෙනවද කියලා බලන්න.
• <Route> component එක <Routes> component එක ඇතුළේ දාලා නැති එක. <Routes> කියන්නේ <Route> Components වල container එක.
• BrowserRouter එක මුළු application එක වටේම wrap කරලා නැති එක.

3. Base URL එකේ ප්‍රශ්න (Base URL issues)

ඔයාගේ application එක root URL එකේ (/) නොවී sub-directory එකක run වෙනවා නම් (උදා: www.example.com/myapp), BrowserRouter එකට basename prop එක දෙන්න පුළුවන්.

<BrowserRouter basename="/myapp">
  <!-- Your routes -->
</BrowserRouter>

හොඳම ක්‍රියාකාරීත්වයන් (Best Practices)

• <Link> vs <a>: අභ්‍යන්තර (internal) navigation වලට හැමවිටම <Link> භාවිතා කරන්න. බාහිර (external) වෙබ් අඩවි වලට යන්න <a> tag එක භාවිතා කරන්න.
• Modular Routes: ඔයාගේ application එක ලොකු වෙනකොට, හැම Route එකක්ම App.js එකේම දාන්නේ නැතුව, ඒවා වෙනම files වලට (උදා: routes.js) වෙන් කරන්න.
• Route Order: Routes ඇතුළේ Route components වල පිළිවෙල වැදගත් වෙන්න පුළුවන්, විශේෂයෙන්ම dynamic paths (/users/:id) සහ static paths (/users/new) එකට තියෙනකොට.

නිගමනය (Conclusion)

හරි, දැන් ඔයාලා React Router වල මූලික සංකල්ප සහ ඒවා ප්‍රායෝගිකව භාවිතා කරන්නේ කොහොමද කියලා හොඳින්ම දන්නවා. Client-side routing, SPAs වල වැදගත්කම, BrowserRouter, Routes, Route, Link කියන components ගැන අපි කතා කළා. ඒ වගේම පොඩි multi-page application එකක් හදලත් බැලුවා.

React Router කියන්නේ React application එකක් හදනකොට අනිවාර්යයෙන්ම අවශ්‍ය වන දෙයක්. මේකෙන් ඔයාලගේ application එකේ User Experience එක ගොඩක් වැඩි දියුණු වෙනවා.

ඔයාලා මේ ටියුටෝරියල් එකෙන් ඉගෙන ගත්ත දේවල් ඔයාලගේ ඊළඟ React project එකේදී භාවිතා කරලා බලන්න. මොනවා හරි ප්‍රශ්න තියෙනවා නම්, පහතින් comment කරන්න! ඔයාලගේ අත්දැකීම් බෙදාගන්නත් අමතක කරන්න එපා. අපි ඊළඟ ටියුටෝරියල් එකෙන් හම්බවෙමු! සුභ දවසක්! 🙏