06-ReactJS Basic Routing with React Router with Video Tutorial in Khmer

Hello my friends! Today let me show you step by step how to setup Basic Routing in ReactJS using React Router (react-router-dom)! Routing allows users to navigate between different pages (like Home, About, Contact) in a Single Page Application (SPA) without reloading the browser! Very easy explanation with code examples and video demo in Khmer!

1. What is React Router?

By default, React builds Single Page Applications (SPA). When user clicks a link, we don't want browser to reload the whole HTML page. react-router-dom changes component view instantly on screen while updating URL path in browser address bar! Check out the official React Router Documentation. Before adding routes, ensure your components manage state properly with 05 - ReactJS State Management (useState)!

Step 1: Install react-router-dom

Open your terminal in project folder and run:

npm install react-router-dom

💡 Tip: Always check package.json after running npm install react-router-dom to ensure react-router-dom appears under dependencies!

2. Core Components of React Router

To use routing, we need 4 main components from react-router-dom:

• BrowserRouter: Enables client-side routing for your app.
• Routes: Parent wrapper for all route definitions.
• Route: Matches a URL path with a React element component.
• Link: Used for page navigation links without page refresh.

3. Code Examples for Basic Routing

Method 1: Single File Routing (Inside App.jsx)

You can define components and routes directly in App.jsx for quick testing:

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Welcome to Home Page!</h1>;
}

function About() {
  return <h1>About Us Page</h1>;
}

function Contact() {
  return <h1>Contact Us Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav className="flex gap-4 p-4 bg-gray-100">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <div className="p-4">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Method 2: Multi-File Component Routing (Best Practice)

In real projects, keep each page component in its own file under src/pages/ folder (e.g. Home.jsx, About.jsx, Contact.jsx).

Navigation Header Component (Navbar.jsx):

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

function Navbar() {
  return (
    <nav className="navbar">
      <Link to="/">Home</Link> | 
      <Link to="/about">About</Link> | 
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

Main App Router (App.jsx):

import { BrowserRouter, 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 (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

💡 Tip: NEVER use standard HTML <a href="/about"> tags for internal navigation in React! <a href> reloads the whole browser page and resets React state. Always use <Link to="/about"> or <NavLink to="/about">! For step-by-step guides, refer to React Router Tutorial Guide.

💡 Tip: To handle 404 "Page Not Found", add a catch-all route at the bottom of your <Routes>: <Route path="*" element={<h1>404 - Page Not Found</h1>} />!

Watch Video: ReactJS Basic Routing with React Router (Khmer)

💡 Series Overview: Want to review from the beginning? Go back to 01 - Get Started with ReactJS + Vite!

---

Hope this post helps you build multi-page navigation in React easily! Practice creating your own Home, About, and Contact pages with react-router-dom. Happy coding my friends! Sharing is caring!